CSS 媒體特性 - display-mode

display-mode 媒體特性用於檢測和設定 Web 內容的樣式，這些內容基於 Web 應用程式的當前顯示模式。它可以用於維護一致的使用者體驗（即建立適應不同模式的樣式），無論站點是從瀏覽器中的 URL 訪問還是從桌面圖示啟動。

可能的值

display-mode 媒體特性可以具有以下值

fullscreen - 此值表示 Web 應用程式處於全屏模式。此模式通常隱藏瀏覽器的使用者介面元素，為 Web 應用程式提供更多的螢幕空間。
standalone - 此值表示 Web 應用程式以獨立模式執行，這通常用於已新增到主螢幕或作為單獨應用程式開啟的 Web 應用程式。它通常以不帶瀏覽器位址列和導航控制元件的方式呈現。
minimal-ui - 此值表示 Web 應用程式處於最小 UI 模式，其中瀏覽器的使用者介面部分隱藏，為 Web 應用程式內容提供更多空間。此模式不太常見，並且可能並非所有瀏覽器都支援。
browser - 此值表示 Web 應用程式在預設瀏覽器模式下執行，在該模式下，它在常規 Web 瀏覽器介面中顯示，並帶有其所有控制元件和功能。
window-controls-overlay - 此值針對顯示在使用者桌面上的單獨視窗中的應用程式，並且啟用了視窗控制元件疊加功能。

語法

@media (display-mode: fullscreen|standalone|minimal-ui|browser|window-controls-overlay){
   //css style
}

CSS display-mode - fullscreen 值

以下示例演示瞭如何使用display-mode: fullscreen 媒體特性在 Web 頁面處於全屏模式時更改其佈局 -

按 F11 鍵進入全屏模式。您將觀察到背景顏色更改為紫色，文字顏色更改為白色。

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: black;
   }
   @media (display-mode: fullscreen) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: fullscreen</h1>
   <p>To see the effect mode press F11 keyboard shortcuts windows fo fullscreen.</p>
</body>
</html>

CSS display-mode - standalone 值

以下示例演示瞭如何使用display-mode: standalone 媒體特性在 Web 頁面以獨立模式顯示時對其進行不同樣式設定 -

當您在獨立模式下啟動 Web 應用程式時，它會將背景顏色更改為紫色，文字顏色更改為白色。

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: black;
   }
   @media (display-mode: standalone) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: standalone</h1>
   <p>To see the effect you need to launcheced the web application to home screen of the mobile.</p>
</body>
</html>

CSS display-mode - minimal-ui 值

以下示例演示瞭如何使用display-mode: minimal-ui 媒體特性在 Web 頁面以最小 UI 模式顯示時對其進行不同樣式設定 -

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: black;
   }
   @media (display-mode: minimal-ui) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: minimal-ui</h1>
   <p>To view the example in minimal UI mode, you can open the page in a PWA or in a mobile browser and then swipe down from the top of the screen to reveal the browser UI elements. Once the browser UI elements are revealed, tap on the "Hide UI" button to enter minimal UI mode.</p>
</body>
</html>

CSS display-mode - browser 值

以下示例演示瞭如何在瀏覽器中開啟 Web 頁面時使用display-mode: browser 媒體特性更改其佈局 -

當您在瀏覽器視窗中開啟頁面時，它會將背景顏色更改為紫色，文字顏色更改為藍色。

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: red;
   }
   @media (display-mode: browser) {
      body {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: browser</h1>
   <p>To view the example in a browser, you can open the HTML file in a web browser.</p>
</body>
</html>

CSS display-mode - window-controls-overlay 值

以下示例演示瞭如何使用display-mode: window-controls-overlay 媒體特性將 body 元素的背景顏色更改為紫色，文字顏色更改為白色 -

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: red;
   }
   @media (display-mode: window-controls-overlay) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: window-controls-overlay</h1>
   <p>To view the example in window controls overlay mode, install the PWA Builder extension and install the page as a PWA. Then, launch the PWA in a separate window and click the maximize button.</p>
</body>
</html>

列印頁面