CSSdisplay-mode メディア特性は、アプリケーションの表示モードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合の使い勝手に一貫性を持たせるために使用することができます。

この特性は、ウェブアプリマニフェストの display メンバーに対応しています。これは、最上位の閲覧コンテキストと子の閲覧コンテキストの両方に適用されます。このクエリは、ウェブアプリマニフェストの有無にかかわらず適用されます。

構文

display-mode 特性は、以下の一覧のうち一つのキーワード値で指定します。

表示モード 説明 表示モードのフォールバック
fullscreen 利用可能な表示領域がすべて使用され、ユーザーエージェントのクロームは表示されません。 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 の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 46Edge 未対応 なしFirefox 完全対応 47
補足
完全対応 47
補足
補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE ? Opera ? Safari ? WebView Android ? Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android 完全対応 47
補足
完全対応 47
補足
補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

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

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