화면 방향 API

Internet Explorer 11에서 도입된 W3C 화면 방향 API 지원을 사용하여 화면의 현재 방향을 감지하고, 방향 변경 시 알림을 받고, 방향을 특정 상태로 잠글 수 있습니다.

중요   Windows 7의 IE11에서는 이 기능이 지원되지 않습니다.

화면 방향 API를 사용하여 사용자 장치의 방향이 변경되는 동안 브라우저가 웹앱의 콘텐츠를 자동으로 재배치하지 않도록 차단하거나 재정의할 수 있습니다. 장치 방향 이벤트를 사용하면 화면 방향 API를 사용하여 사용자 장치 방향 및 동작 센서 데이터가 정확하며 사용자가 화면 방향을 임의로 변경해도 무효화되거나 복잡해지지 않도록 디스플레이를 잠글 수도 있습니다.

방향 값

화면 방향 API는 다음 개념을 사용하여 서로 다른 장치에서 다양한 방향 상태를 설명합니다. 다이어그램 예제에서는 예제 장치에 대해 다음 정상(기본) 방향을 가정합니다.

모바일(세로 방향) 장치 및 태블릿(가로 방향) 장치의 다이어그램.

방향 값설명장치 방향 예제
portrait-primary화면이 세로 모드에 있고 호스트 장치의 오른쪽이 위쪽을 향하거나(정상 방향이 세로 모드에 있는 경우) 호스트 장치가 시계 방향으로 90도 회전합니다(정상 방향이 가로 모드에 있는 경우)."portrait-primary" 모드에서 모바일 장치 및 태블릿 장치 방향의 그림
landscape-primary화면이 가로 모드에 있고 호스트 장치의 오른쪽이 위쪽을 향하거나(정상 방향이 가로 모드에 있는 경우) 호스트 장치가 시계 반대 방향으로 90도 회전합니다(정상 방향이 세로 모드에 있는 경우)."landscape-primary" 모드에서 모바일 장치 및 태블릿 장치 방향의 그림
portrait-secondary화면이 세로 모드에 있고 호스트 장치가 뒤집혀 있거나(정상 방향이 세로 모드에 있는 경우) 호스트 장치가 시계 반대 방향으로 90도 회전합니다(정상 방향이 가로 모드에 있는 경우)."portrait-secondary" 모드에서 모바일 장치 및 태블릿 장치 방향의 그림
landscape-secondary화면이 가로 모드에 있고 호스트 장치가 뒤집혀 있거나(정상 방향이 가로 모드에 있는 경우) 호스트 장치가 시계 방향으로 90도 회전합니다(정상 방향이 세로 모드에 있는 경우)."landscape-secondary" 모드에서 모바일 장치 및 태블릿 장치 방향의 그림

 

변경 검색 및 방향 잠금

사용자 화면 방향이 변경될 때를 모니터링하려면 단순 Event 개체를 디스패치하는 screen 개체의 MSOrientationChange 이벤트를 수신 대기합니다. 이를 바탕으로 screen 개체의 msOrientation 속성에서 현재 화면 방향을 확인할 수 있습니다.


function orientationChangeHandler(evt) {
  var orientation = evt.target.msOrientation;
  // Respond to the screen orientation change
}

디스플레이를 특정 방향으로 잠그려면 msLockOrientation 메서드를 호출하고 위의 방향 값 섹션에 설명된 값 중 하나 이상을 전달합니다.


screen.msLockOrientation("portrait-primary", "portrait-secondary"); 

또는 다음 "단축형" 값 중 하나를 전달할 수 있습니다.

용어설명

portrait

portrait-primaryportrait-secondary 사례를 둘 다 나타내는 값.

landscape

landscape-primarylandscape-secondary 사례를 둘 다 나타내는 값.

 

Internet Explorer가 전체 화면 모드에 있는 경우에만 화면 방향을 잠글 수 있습니다(사용자가 F11 키를 누르거나 전체 화면 API를 통해).

잠금이 한 방향으로만 이루어지면 화면이 지정된 방향으로 유지되고 화면 방향이 잠금 해제될 때까지 변경되지 않습니다. 그렇지 않으면 화면 방향은 사용자가 호스트 장치를 회전할 때 잠긴 지정된 방향 사이에서 변경될 수 있습니다.

잠금 해제하려면 screen.msUnlockOrientation 메서드를 호출합니다.

API 참조

msOrientation
MSOrientationChange
msLockOrientation
msUnlockOrientation

사양

화면 방향 API

 

 

표시:
© 2014 Microsoft