display-mode

**display-mode** CSS 媒体特性 可用于测试 Web 应用程序是在普通浏览器选项卡中显示还是以其他方式显示，例如独立应用程序或全屏模式。

例如

display-mode 值适用于顶级浏览上下文和任何子浏览上下文。

语法

display-mode 特性被指定为从以下列表中选择的关键字值。

browser

应用程序在常规浏览器选项卡或新窗口中打开，具体取决于浏览器和平台。

fullscreen

使用所有可用的显示区域，并且不显示用户代理 镀铬 被显示。这可用于仅在应用程序通过 全屏 API 或使用 Web 应用程序清单的 display 成员的 fullscreen 值进入全屏模式时应用 CSS。

minimal-ui

应用程序将看起来和感觉像一个独立的应用程序，但将具有一组最小的 UI 元素来控制导航。元素会因浏览器而异。

picture-in-picture

此模式允许用户在设备上与其他网站或应用程序交互时继续使用特定内容。该应用程序以浮动且始终位于顶部的窗口显示。这可用于仅在应用程序被文档画中画 API置于画中画模式时应用 CSS。

独立

应用程序的外观和感觉将类似于一个独立的应用程序。这可能包括应用程序拥有不同的窗口、在应用程序启动器中拥有自己的图标等。在此模式下，用户代理将排除用于控制导航的 UI 元素，但可以包括其他 UI 元素，例如状态栏。

窗口控件覆盖

在此模式下，应用程序的外观和感觉类似于一个独立的桌面应用程序，并且窗口控件覆盖功能已启用。

示例

如果应用程序处于全屏模式，则应用 CSS

css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

为画中画内容提供浅色和深色配色方案

在此示例中，我们将display-mode: picture-in-picture值与prefers-color-scheme媒体特征相结合，创建了浅色和深色配色方案，这些配色方案将根据用户的配色方案偏好应用，仅在应用程序以画中画模式显示时应用。

css
@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: #333;
  }

  a {
    color: antiquewhite;
  }
}

有关更多信息和完整示例，请参阅使用文档画中画 API。

规范

规范
媒体查询级别 5
# 显示模式

浏览器兼容性

BCD 表仅在浏览器中加载

另请参见