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>

打印页面