자바스크립트에서 랜드스케이프 모드 감지

소개

한 애플리케이션의 로직에서 디바이스의 랜드스케이프 모드에 따라 처리를 발화시키는 코드가 있었지만, Android 키보드 입력을 했을 때 왠지 그 처리가 실행되는 버그가 있어서 빠졌습니다.
그 때에 랜드스케이프 모드에 대해 배웠으므로 기사를 써 갑니다.

랜드스케이프 모드란?

사진이나 문서, 용지, 화면 등 직사각형 영역의 방향을 나타내는 용어 중 하나로 가로 방향. 가로, 가로 두기라고도한다.

반대로 세로 길이를 인물 모드라고합니다. 관계로서는 다음과 같은 관계입니다.


※wikipedia에서 인용

JavaScript에서 랜드스케이프 모드를 감지하는 방법

window.matchMedia 를 사용하면, 현재의 document가 랜드스케이프 모드인지, 인물 모드인지를 판정할 수 있습니다!window.matchMedia는 반환 값으로 MediaQueryListオブジェクト를 반환합니다. 이 객체에는 matches라는 Boolean 유형의 속성이 있으며 true이면 document가 현재 미디어 쿼리 목록과 일치하고 false이면 그렇지 않습니다.

실제로 Chrome 검증 도구를 사용해보십시오!


보기 힘들지만 유효성 검사 도구에서 window.matchMedia를 사용하고 있습니다.

mql1 = window.matchMedia("(orientation: landscape)");
mql1.matches
> true

MediaQueryList 객체를 가져와 matches 속성의 값을 출력합니다. true가 반환되고 있음을 알 수 있습니다.

※여기서 window.matchMedia 에 인수로서 건네주고 있다 orientation: landscape 은 어쩐지!orientation: landscape는 CSS의 미디어 특성으로 뷰포트의 방향을 확인할 수 있습니다.
랜드스케이프 모드이면 orientation: landscape, 인물 모드이면 orientation: portrait를 사용합니다.

랜드스케이프 모드의 판정을 행하고 있으므로, matches 의 값은 true 가 돌아오고 있습니다! ! 이제 랜드스케이프 모드를 감지할 수 있을 것 같습니다.

그건 그렇고, 스마트 폰 모드에서 시도하면 false가 반환되었습니다!

요약

JavaScript로 랜드스케이프 모드의 검출 방법에 대해 정리했습니다! 자바스크립트는 다양할 수 있어 재미있습니다!

추가
왠지 안드로이드 키보드 입력을 사용하면, 랜드스케이프 모드가 되어 버립니다. (아는 분이 있으면 알려주세요.)
Android에서 키보드 입력으로 뭔가 버그가 발생하면이 현상을 의심해 볼 수 있습니다

뭐든지 좋기 때문에, 코멘트 등 받을 수 있으면 매우 기뻐합니다

참고