display-mode
display-mode CSS 媒體特性 可用於檢測 Web 應用是在常規瀏覽器標籤頁中顯示，還是以其他方式顯示，例如作為獨立應用或全屏模式。
例如
-
漸進式 Web 應用 可以透過在清單中設定
display成員 來設定其顯示模式。在這種情況下，display-mode的值標識了所設定的值（但請注意，這可能與清單中請求的值不同，因為瀏覽器可能不支援請求的模式）。 -
任何 Web 應用都可以使用 全屏 API 或 文件畫中畫 API 來設定顯示模式，在這種情況下，
display-mode的值標識了所設定的模式。
display-mode 值適用於頂級瀏覽上下文和任何子瀏覽上下文。
語法
display-mode 特性被指定為從以下列表中選擇的關鍵字值。
browser-
應用程式在傳統的瀏覽器標籤頁或新視窗中開啟，具體取決於瀏覽器和平臺。
fullscreen-
使用所有可用的顯示區域，並且不顯示使用者代理的 UI 元素。這可以用於僅當應用程式透過 全屏 API 或使用 Web 應用清單的
display成員的fullscreen值進入全屏模式時才應用 CSS。 minimal-ui-
應用程式將看起來和感覺像一個獨立的應用程式，但將具有一組最少的用於控制導航的 UI 元素。這些元素因瀏覽器而異。
picture-in-picture-
此模式允許使用者在與裝置上的其他網站或應用程式互動時繼續消費特定內容。應用程式顯示在一個浮動且始終置頂的視窗中。這可以用於僅當應用程式透過 文件畫中畫 API 進入畫中畫模式時才應用 CSS。
standalone-
應用程式將看起來和感覺像一個獨立的應用程式。這可以包括應用程式具有不同的視窗、在應用程式啟動器中擁有自己的圖示等。在此模式下，使用者代理將排除用於控制導航的 UI 元素，但可以包括其他 UI 元素，例如狀態列。
window-controls-overlay-
在此模式下，應用程式看起來和感覺像一個獨立的桌面應用程式，並且啟用了 視窗控制元件疊加 特性。
示例
如果應用程式處於全屏模式，則應用 CSS
@media (display-mode: fullscreen) {
body {
margin: 0;
border: 5px solid black;
}
}
為畫中畫內容提供淺色和深色配色方案
在此示例中，我們將 display-mode: picture-in-picture 值與 prefers-color-scheme 媒體特性結合使用，以建立淺色和深色配色方案，這些方案僅當應用程式以畫中畫模式顯示時，根據使用者的配色方案偏好應用。
@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
body {
background: antiquewhite;
}
}
@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
body {
background: #333333;
}
a {
color: antiquewhite;
}
}
有關更多資訊和完整示例，請參閱 使用文件畫中畫 API。
規範
| 規範 |
|---|
| 媒體查詢 Level 5 # 顯示模式 |
瀏覽器相容性
載入中…