“display-mode”メディア・フィーチャー｜メディア・フィーチャー｜メディア・クエリ｜CSS－havin' a coffee break

＃

“display-mode”メディア・フィーチャーについて

“display-mode”メディア・フィーチャーはアプリケーションの表示モードを条件とするためのメディア・フィーチャーです。

ウェブアプリケーションを表示している表示モードによってスタイルを切り替えるために使用することができます。ウェブアプリマニフェストでウェブアプリの表示モードを指定する“display”メンバーに対応します。

プログレッシブウェブアプリで通常のウェブサイトを閲覧する時のようなウェブブラウザのユーザインターフェースが表示される場合と、ホーム画面のアイコンから表示してこれらのユーザインターフェースが非表示の場合にウェブアプリ自体のナビゲーションの表示と非表示を切り替えて使い勝手が変わらないようにするのに有用です。

“fullscreen”ではディスプレイ全体にウェブアプリが表示され、“standalone”ではスタンドアロンアプリのようにステータスバーなどのシステムUIは表示されます。

“minimal-ui”ではウェブアプリはスタンドアロンアプリのように表示されますが、戻るボタンやURLなど最小限のナビゲーションのためのユーザインターフェースが表示されます。このユーザインターフェースに何が含まれるかはブラウザによって異なります。

“browser”はウェブブラウザで通常のウェブサイトを表示した時のようにツールバー、メニューバー、タブ、戻るボタンなどのナビゲーションのためブラウザのユーザインターフェースが表示される状態です。

それぞれの表示モードにはブラウザがそれぞれの表示モードに対応していない時に使用されるフォールバックが規定されており、“fullscreen”に対応していない時は“standalone”、“standalone”に対応していない時は“minimal-ui”、“minimal-ui”に対応していない時は“browser”です。“browser”はすべてのブラウザが対応している前提なのでフォールバックはありません。

＃

指定できる値

値	説明
fullscreen	表示領域がすべて使用され、ユーザインターフェースは表示されない
standalone	スタンドアロンアプリケーションのように表示領域がすべて使用されるがステータスバーのようなユーザインターフェースは表示される
minimal-ui	スタンドアロンアプリケーションのように表示するがナビゲーションのための最小限のナビゲーションのためのユーザインターフェースが表示される
browser	ブラウザのようにナビゲーションのためのユーザインターフェースが表示される

＃

サンプルコード



@media (standalone) {


.sample {



/* “standalone”モードで表示された時に適用されるスタイル。 */



}


}

メディア・クエリ~“display-mode”メディア・フィーチャー

“display-mode”メディア・フィーチャーについて

指定できる値

サンプルコード