##はじめに
あるアプリケーション内のロジックで、デバイスのランドスケープモードによって、処理を発火させるコードがあったのですが、Androidのキーボード入力をした場合になぜかその処理が実行されるバグがあり、ハマりました。
その際にランドスケープモードについて学んだので記事を書いていきます。
##ランドスケープモードとは
写真や文書、用紙、画面など長方形の領域の向きを表す用語の一つで、横向きのこと。 横長、横置きとも言う。
逆に縦長をポートレートモードと言います。関係としては以下のような関係です。
※wikipediaより引用##JavaScriptでランドスケープモードを検知する方法
window.matchMedia
を使うことで、現在のdocumentがランドスケープモードなのか、ポートレートモードなのかを判定することができます!
window.matchMedia
は戻り値として、MediaQueryListオブジェクト
を返します。このオブジェクトはmatches
というBoolean型のプロパティを持っており、true であれば document が現在メディアクエリリストに一致しており、false であればそうではありません。
見づらいですが、検証ツールで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でキーボード入力で何かバグが起こっていたら、この現象を疑ってみてもいいかもしれません
なんでも良いので、コメント等頂けるととても喜びます
##参考