この記事は編集レビューを必要としています。ぜひご協力ください。
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 |