2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-06-25

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

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

##参考

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?