display-mode

display-mode は、アプリケーションのディスプレイモードに基づいて選択的に CSS を適用する CSS メディア機能です。この機能は、Web アップマニフェストの display メンバー に対応しています。トップレベルブラウジングコンテキストと子ブラウジングコンテキストの両方に対応しています。 このクエリは、Web アップマニフェストの有無にかかわらず適用されます。URL からサイトを起動するときとデスクトップアイコンから起動するときのユーザーエクスペリエンスに一貫性を持たせるために、このクエリを使用してください。

この値は次のいずれかを設定できます:

表示モード 説明 表示モードのフォールバック
fullscreen 利用可能な表示エリアがすべて使用され、ユーザーエージェント(chrome)は表示されません。 standalone
standalone アプリケーションはスタンドアロンのような外観や操作感になります。これは異なるウィンドウを持つアプリケーションを含めたり、アプリケーションランチャーにアイコンを含めたりすることなどができます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーのようなそのほかの UI を含めることができます。 minimal-ui
minimal-ui アプリケーションはスタンドアロンのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザによって異なります。 browser
browser アプリケーションは、ブラウザとプラットフォームに応じて、従来のブラウザタブまたは新しいウィンドウで開きます。これが既定です。 (なし)

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

仕様

仕様 状態 コメント
Web App Manifest
display-mode の定義
草案 初期定義。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 47 (47) ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート ? ? ? ? ? ? 46.0

 

ドキュメントのタグと貢献者

 このページの貢献者: takahashim, YuichiNukiyama
 最終更新者: takahashim,