Ionic 화면 세로로 고정하기 (화면회전 막기)

안녕하세요. IT김군입니다.

Ionic 세로로 화면 고정하기에 대해 알아보도록 하겠습니다.

Screen Orientation Plugin을 사용합니다.

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

우선 Plugin을 프로젝트에 설치해주신 후에

import { ScreenOrientation } from '@ionic-native/screen-orientation';

providers : [
     ScreenOrientation
]

위와 같이 app.module.ts에 선언해줍니다.

그 다음 적용하실 페이지에 아래와 같이 import 와 생성자에 선언해주세요.

import { ScreenOrientation } from '@ionic-native/screen-orientation';

constructor(private screenOrientation : ScreenOrientation)

저 같은 경우는 모든 페이지에 적용하기 위해 app.component.ts에 적용하였습니다.

app.component.ts의 MyApp 클래스 생성자 내부에

this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT_PRIMARY);

를 입력하시면 적용한 페이지는 화면 회전이 불가하게 세로로 고정됩니다.

위 링크를 타고 API를 확인하러 가시면 더 많은 화면 컨트롤 기능이 있으니 확인하시면 될 것 같습니다.

문의사항 있으시면 댓글주세요.

감사합니다.