We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS @media 特性の display-mode は、アプリケーションのディスプレイモードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合のユーザー体験に一貫性を持たせるために使用してください。

この特性は、Web アプリマニフェストの display メンバーに対応しています。これは、トップレベルブラウジングコンテキストと子ブラウジングコンテキストの両方に適用されます。このクエリーは、Web アプリマニフェストの有無にかかわらず適用されます。

構文

display-mode 特性には、以下のリストから選ばれたキーワード値を指定します。

表示モード 説明 表示モードのフォールバック
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 の定義
草案 初期定義。

ブラウザーの実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

[1] minimal-ui 値はサポートしていません。display-mode@supports は、Chrome 48 以降でサポートされています。

[2] fullscreen 値および browser 値だけは 47 でサポートされました。 minimal-ui および standalone Firefox 57 で追加されました。

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

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