[BOM] Lock Orientation

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation

 

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

https://usefulangle.com/post/105/javascript-change-screen-orientation

https://www.jotform.com/blog/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639/

https://code-boxx.com/lock-screen-orientation/

https://www.sitepoint.com/introducing-screen-orientation-api/

https://medium.com/mirafra-sw-engineering/how-to-change-screen-orientation-with-javascript-9b82fca93d56

 

1. Screen Orientation

window.screen.orientation.type

모바일 디바이스의 자세를 문자열로 나타냄(string: 'portrait-primary', 'landscape-primary', 'landscape-secondary')

데스크탑 브라우저의 경우 고정값('landscape-primary')

 

window.screen.orientation.angle

모바일 디바이스의 자세를 각도로 나타냄(number: 0, 90, 270)

데스크탑 브라우저의 경우 고정값(0)

 

2. Lock Orientation

모바일 브라우저 자세고정은 풀스크린 모드에서만 가능

 

Element.requestFullscreen()

모바일 브라우저를 풀스크린 모드로 전환

* 해당 메소드는 window.onload 이벤트에는 작동하지 않음

 

window.screen.orientation.lock()

자세고정(반환값은 Promise)

 

window.screen.orientation.unlock()

고정해제