📱

JavaScriptでランドスケープモードを検知する

2021/06/26に公開

はじめに

あるアプリケーション内のロジックで、デバイスのランドスケープモードによって、処理を発火させるコードがあったのですが、Androidのキーボード入力をした場合になぜかその処理が実行されるバグがあり、ハマりました。
その際にランドスケープモードについて学んだので記事を書いていきます。

ランドスケープモードとは

写真や文書、用紙、画面など長方形の領域の向きを表す用語の一つで、横向きのこと。 横長、横置きとも言う。

逆に縦長をポートレートモードと言います。関係としては以下のような関係です。

※wikipediaより引用

JavaScriptでランドスケープモードを検知する方法

window.matchMedia を使うことで、現在のdocumentがランドスケープモードなのか、ポートレートモードなのかを判定することができます!
window.matchMedia は戻り値として、MediaQueryListオブジェクト を返します。このオブジェクトはmatchesというBoolean型のプロパティを持っており、true であれば document が現在メディアクエリリストに一致しており、false であればそうではありません。

実際にChromeの検証ツールを使って試してみました!
スクリーンショット 2021-06-26 2.26.01.png

見づらいですが、検証ツールで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が返ってきました!
スクリーンショット 2021-06-26 2.31.45.png

まとめ

JavaScriptでランドスケープモードの検知方法についてまとめました! JavaScriptは色々なことができて面白いです!

追記
なぜかAndroidのキーボード入力を使用すると、ランドスケープモードになってしまいます。(ご存知の方がいたら教えてください。)
Androidでキーボード入力で何かバグが起こっていたら、この現象を疑ってみてもいいかもしれません😃

なんでも良いので、コメント等頂けるととても喜びます😁

参考

https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

https://developer.mozilla.org/ja/docs/Web/CSS/@media/orientation

https://news.mynavi.jp/article/20200513-iphone_why/

Discussion