JavaScriptでランドスケープモードを検知する
はじめに
あるアプリケーション内のロジックで、デバイスのランドスケープモードによって、処理を発火させるコードがあったのですが、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でランドスケープモードの検知方法についてまとめました！ JavaScriptは色々なことができて面白いです！
追記
なぜかAndroidのキーボード入力を使用すると、ランドスケープモードになってしまいます。（ご存知の方がいたら教えてください。）
Androidでキーボード入力で何かバグが起こっていたら、この現象を疑ってみてもいいかもしれません😃
なんでも良いので、コメント等頂けるととても喜びます😁
参考
Discussion