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

display-mode media query

display-mode は CSS のメディア特性で、ウェブアプリが通常のブラウザータブで表示されているか、スタンドアロンアプリや全画面モードなどの別の方法で表示されているかを検査することができます。

例えば、

プログレッシブウェブアプリでは、マニフェストで display メンバーを設定することで、表示モードを設定することができます。この場合、 display-mode の値は、設定された値を識別します（ただし、リクエストされたモードにブラウザーが対応していない場合があるため、マニフェストでリクエストされた値と同じではない場合があることに注意してください）。

どのウェブアプリも、全画面 API または文書ピクチャインピクチャ API を使用して表示モードを設定することができます。この場合、 display-mode の値が設定されたモードを識別します。

display-mode の値は、最上位の閲覧コンテキストおよびすべての子閲覧コンテキストに適用されます。

PWA表示モード検出

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.display-mode
42
79
47
13
42
12.2
CSS @ ルール
display-mode.browser

「ブラウザ」の値
42
79
47
13
42
12.2
display-mode.fullscreen

「全画面」値
47
79
47
13
12.2
display-mode.minimal-ui

`minimal-ui` 値
42
79
57
13
42
12.2
display-mode.standalone

「スタンドアロン」値
42
79
57
13
42
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Safari ブラウザ ウィンドウでは、macOS フル スクリーン ウィンドウやフルスクリーン API を使用している場合でも、「display-mode: browser」は常に true になります。 インストールされた Web アプリケーションでは、他の `display-mode` 値は、サポートされているマニフェストの `display` メンバー値によって指定された場合にのみ true になります。 mdn/browser-compat-data#18807 (コメント) を参照してください。
注釈 1件
実装メモ
  • Safari アプリでは、フルスクリーン API を使用している場合でも、「display-mode: browser」は常に true になります。 インストールされた Web アプリケーションでは、他の `display-mode` 値は、サポートされているマニフェストの `display` メンバー値によって指定された場合にのみ true になります。 mdn/browser-compat-data#18807 (コメント) を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • Firefox の「全画面」ユーザー インターフェイスでは、ブラウザのタブやその他のユーザー インターフェイスが表示されますが、「display-mode: fullscreen」は true です。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • Safari ブラウザ ウィンドウでは、Fullscreen API を使用している場合でも、「display-mode: fullscreen」が true になることはありません。 mdn/browser-compat-data#18807 (コメント) を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • Safari アプリでは、Fullscreen API を使用している場合でも、「display-mode: fullscreen」が true になることはありません。 mdn/browser-compat-data#18807 (コメント) を参照してください。
  • 「display」マニフェスト メンバーが「standalone」に設定されているインストール済み Web アプリケーションでは、システム ステータス バーが表示されていても、「display-mode: fullscreen」は true になります。 バグ 264218 を参照してください。
注釈 1件
実装メモ
  • `display-mode: minimum-ui` は決して true にはなりません。
注釈 1件
実装メモ
  • `display-mode: minimum-ui` は決して true にはなりません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `display-mode: minimum-ui` は決して true にはなりません。
注釈 1件
実装メモ
  • 「display-mode:standalone」が真になることはありません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 「display」マニフェスト メンバーが「standalone」に設定されているインストール済み Web アプリケーションでは、「display-mode:standalone」は false、「display-mode:fullscreen」は true です。 バグ 264218 を参照してください。

基本構文

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

ライブデモ

standalone

CSS Standalone demo.

プレビュー全画面表示

fullscreen

CSS Fullscreen demo.

プレビュー全画面表示

browser

CSS Browser demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク