JS で端末の向きや PWA で動いてるかを判定する - yKicchan's blog
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)"
PWA環境下で実行されているかを判定する方法 - Qiita
はじめに ReactやAngular、Vue.jsなどの主要なフレームワークを使えばワンステップ＋αで簡単に実装できるようになっていることからSSLさえ導入していればおまけ的に導入できるイメージのPWA。 実装を進めていくと「web表示だけ【ホーム画面に追加】の誘導モーダルを出したい」「PWAの環境下でのみストレージにデータを保持させておきたい」といったときにPWA環境か通常のブラウザかを判定する場面が多かれ少なかれ出てきます。 しかし、あまりここに触れている記事を見かけなかったので備忘録も兼ねて掲載します。 本題 メディアクエリのパース結果を利用してJavaScript上で判定します。 以下はmanifest.jsonでディスプレイモード「standalone」を指定した場合を想定しています。 if(window.matchMedia('(display-mode: standalone
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
