JS で端末の向きや PWA で動いてるかを判定する

JS から MediaQuery 使えるんだって

MDN: window.matchMedia

指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。

状況に応じてリッチな UI や振る舞いを表現するために使えそう。
自分はアプリケーションが PWA で動いているかどうかで動作を変えたいシチュエーションがあったのでそこで活かした。

使用例

PWA の判定

※ manifest.json で "display": "standalone" の指定がされていること

if (window.matchMedia('(display-mode: standalone)').matches) {
  // PWA のときの処理
}

画面の向きの判定

if (window.matchMedia( "(orientation: landscape)" ).matches) {
  // 横向き
}

if (window.matchMedia( "(orientation: portrait)" ).matches) {
  // 縦向き
}

端末サイズ(画面幅)の判定

if (window.matchMedia( "(min-width: 1024px)" ).matches) {
  // PC
} else if (window.matchMedia('(min-width: 768px)').matches) {
  // タブレット
} else {
  // SP
}

↑ 画面の向きも合わせるとより正確に判定できる

つぶやき

特に画面の向きやサイズに応じた JS での制御は、SPAが標準的な今あまりDOMにアクセスして要素の情報から制御するのは気が引ける(ライフサイクルやレンダリングの仕組みへの理解がある程度必要になる)ので、MediaQuery を利用して制御できるのは手軽でよい。
ただし window オブジェクトを参照しているため実行環境への配慮は必要。