はじめに

あるアプリケーション内のロジックで、デバイスのランドスケープモードによって、処理を発火させるコードがあったのですが、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でキーボード入力で何かバグが起こっていたら、この現象を疑ってみてもいいかもしれません

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

参考