Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
メディアクエリ Limited support

display-mode media query

PWA（Progressive Web App）としてインストールされたWebアプリの表示モードに応じたスタイル調整を可能にします。ブラウザタブ、フルスクリーン、スタンドアロン、minimal-uiなどのモードを検出できます。インストール済みアプリとブラウザ閲覧で異なるUIを提供する場合に有用です。

PWA表示モード検出

概要

PWA（Progressive Web App）としてインストールされたWebアプリの表示モードに応じたスタイル調整を可能にします。ブラウザタブ、フルスクリーン、スタンドアロン、minimal-uiなどのモードを検出できます。インストール済みアプリとブラウザ閲覧で異なるUIを提供する場合に有用です。

対応ブラウザ

デスクトップ

Chrome 47+
Edge 79+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 未対応
Safari iOS 未対応
Firefox Android 116+

基本構文

CSS 
@media (display-mode: standalone) {
  .install-button { display: none; }
  .app-header { padding-top: env(safe-area-inset-top); }
}

実務での使いどころ

  • PWAインストール後のUI最適化

    スタンドアロンモードで動作中のPWAでインストールボタンを非表示にし、アプリ専用のナビゲーションを表示します。

注意点

  • SafariとFirefoxではサポートが限定的なため、display-modeに依存するレイアウトには必ずフォールバックを用意してください。

アクセシビリティ

  • 表示モードの切り替えでナビゲーション構造が変わる場合、どのモードでもキーボード操作とスクリーンリーダーで全機能にアクセスできることを確認してください。

参考リンク