모든 플랫폼에서 ionic에서만 앱을 세로 모드로 제한하는 방법은 무엇입니까?


121

Ionic / Cordova에서 작업 중입니다.이 항목을 추가 androidManifest.xml했지만이 기능이 작동하지 않았고 앱이 여전히 두 가지 방식으로 표시됩니다.

android:screenOrientation="portrait"

내 앱을 세로 모드로만 제한하려면 어떻게해야합니까? Android에서 확인했는데 작동하지 않습니다.


이 이온 2의 작업 사촌 ?? 이온위한 작동
마니 쿠마

답변:


315

모든 장치에서 세로 모드로만 제한하려면이 줄을 프로젝트 루트 폴더의 config.xml에 추가해야합니다.

<preference name="orientation" value="portrait" />

그런 다음 명령 줄에 아래 텍스트를 입력하여 플랫폼을 다시 빌드하십시오.

ionic build

2
만나서 반갑습니다. 나를 위해 일했습니다. 안드로이드에서 확인했습니다. 감사 Vadiem
무하마드 Faizan 칸

1
특정 화면 하나만 어떻게 제한합니까?
user3607282 jul.

1
나는이 나 자신을 테스트하지 않은,하지만 당신은이 튜토리얼을 사용하여 원하는 결과를 얻을 수 있습니다 gajotres.net/...
Vadiem 얀센를

4
이것은 실제 장치 btw에서 실행할 때만 작동하는 것 같습니다. Ionic View 클라우드 앱을 통해 실행하면 효과가 없습니다.
Johncl

1
Ok for Ionic 4
Pierrick Martellière

36

Ionic v2 + 업데이트

Ionic 버전 2 이상의 경우 및 플러그인을 포함하여 사용하는 모든 플러그인에 해당하는 Ionic Native 패키지 도 설치해야합니다 .cordova-plugin-phonegap-plugin-

  1. Ionic 네이티브 플러그인 설치

    CLI 에서 플러그인 용 Ionic Native의 TypeScript 모듈을 설치합니다 .

    $ ionic cordova plugin add --save cordova-plugin-screen-orientation
    $ npm install --save @ionic-native/screen-orientation
    

    * --save명령은 선택 사항이며 package.json파일에 플러그인을 추가하지 않으려면 생략 할 수 있습니다.

  2. ScreenOrientation플러그인 가져 오기

    문서controller 에서 사용할 수있는 자세한 내용은 플러그인을 가져옵니다 .

    import { ScreenOrientation } from '@ionic-native/screen-orientation';
    
    @Component({
        templateUrl: 'app.html',
        providers: [
            ScreenOrientation
        ]
    })
    
    constructor(private screenOrientation: ScreenOrientation) {
      // Your code here...
    }
    
  3. 당신의 일을

    프로그래밍 방식으로 화면 방향을 잠그고 잠금 해제합니다.

    // Set orientation to portrait
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
    
    // Disable orientation lock
    this.screenOrientation.unlock();
    
  4. 보너스 포인트

    현재 방향을 가져올 수도 있습니다.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    

1
참고 : "@ ionic-native / core": "^ 3.6.1"이 필요합니다. 낮은 버전에서는 오류가 발생하기 때문입니다. forum.ionicframework.com/t/…
Luckylooke

공급자 목록에 ScreenOrientation를 추가하십시오
타일러

3
ionic plugin더 이상 작동하지 않는 것 같습니다. 지금이라고 생각합니다 ionic cordova plugin. 예를 들면ionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33

2
추가는 <preference name="Orientation" value="portrait" />나를 위해 충분한 것 같다
tobbe

2
DevApp은 DevApp 앱 내에서 웹 뷰로 앱을 실행하고 있으므로 일부 기본 기능이 작동하지 않습니다. 장치에서 직접 앱을 컴파일하고 실행하면 작동합니다.
Tyler

13

https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences 에 따르면 ,

방향을 사용하면 방향을 잠그고 방향 변경에 따라 인터페이스가 회전하는 것을 방지 할 수 있습니다. 가능한 값은 기본값, 가로 또는 세로입니다. 예:

<preference name="Orientation" value="landscape" />

이러한 값은 대소 문자를 구분하며 "orientation"이 아니라 "Orientation"입니다.


1
제공 한 링크에서 위로 스크롤하면 다음과 같이 표시됩니다. "<preference> 태그는 다양한 옵션을 이름 / 값 속성 쌍으로 설정합니다. 각 환경 설정의 이름은 대소 문자를 구분하지 않습니다 . [...]."
Vadiem Janssens

2
"방향"이 저에게 효과적입니다. 실제 장치에서 앱을 실행할 때 "방향"이 흰색 화면을 표시합니다.
CMA

2
"orientation"은 Android 기기에서 Ionic 2와 함께 작동합니다.
kamayd 2010 년

6

방향에 대해 뭔가를하고 싶다면 앱 방향을 변경할 때 어떤 작업을 수행하려는 경우 ionic 프레임 워크 플러그인을 사용해야합니다 ... https://ionicframework.com/docs/native/screen-orientation/

앱을 세로 또는 가로 모드로 제한하려면 config.xml에 다음 줄을 추가하면됩니다.

<preference name="orientation" value="portrait" />
                 OR
<preference name="orientation" value="landscape" />

4

먼저 다음을 사용하여 Cordova 화면 방향 플러그인 을 추가해야합니다.

cordova plugin add cordova-plugin-screen-orientation

다음 추가 screen.lockOrientation('portrait');.run()방법

angular.module('myApp', [])
.run(function($ionicPlatform) {

    screen.lockOrientation('portrait');
    console.log('Orientation is ' + screen.orientation);

});
})

2

각도 안에 다음 과 같은 app.js선을 추가하십시오 screen.lockOrientation('portrait');.

an

angular.module('app', ['ionic'])
.run(function($ionicPlatform) {
    // LOCK ORIENTATION TO PORTRAIT.
    screen.lockOrientation('portrait');
  });
})

.run함수에 다른 코드도 있지만 관심있는 코드는 내가 작성한 줄입니다. <preference name="orientation" value="portrait" />내 코드에 줄 을 추가하지 않았지만cordova-plugin-device-orientation


2

추가하십시오 android:screenOrientation="portrait"androidManifest.xml안드로이드를위한 활동 태그의 속성으로 파일.

<activity
        android:name="com.example.demo_spinner.MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait" >
</activity>

1

config.xml에서 다음 줄을 추가하십시오.

<preference name="orientation" value="portrait" />

0

당신은 이것을 시도 할 수 있습니다 :-

iOS, Android, WP8 및 Blackberry 10에 대한 일반적인 방식으로 화면 방향을 설정 / 잠그는 Cordova 플러그인.이 플러그인은 초기 버전의 Screen Orientation API를 기반으로하므로 현재 API가 현재 사양과 일치하지 않습니다.

https://github.com/apache/cordova-plugin-screen-orientation

또는 xml 구성에서 다음 코드를 시도하십시오.

<preference name="orientation" value="portrait" />
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.