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 # 显示模式 |
浏览器兼容性
加载中…