PWAスタンドアロン表示モード
display-modeメディア機能でPWAがスタンドアロンモードで実行されているかを検出。インストール済みPWA用にUIをカスタマイズ。
Output & Display
詳細な説明
PWAスタンドアロンモードの検出
PWAがホーム画面にインストールされると、ブラウザクローム（アドレスバー、タブ）なしでスタンドアロンモードで実行できます。
クエリ
@media (display-mode: standalone) {
/* インストール済みPWA用スタイル */
}
スタンドアロンモードでカスタマイズすべき点
- iOSのステータスバー用に上部パディングを追加
- 「アプリをインストール」バナーを非表示
- カスタムタイトルバーを追加
manifest.jsonでの設定
{ "display": "standalone" }
ユースケース
PWAがインストールされた際に、ブラウザ固有の要素を非表示にしたり、ステータスバーに合わせてレイアウトを調整したりするなど、ネイティブのような体験を提供するためにこのクエリを使用してください。