display

语法

/* Keyword values */
"display": "fullscreen"
"display": "standalone"
"display": "minimal-ui"
"display": "browser"

值

display

带关键字值的字符串。如果未指定，则使用默认值 browser。关键字值包括：

fullscreen

以隐藏浏览器 UI 元素的模式打开应用，并使用所有可用的显示区域。对于全屏参与至关重要且用户期望的应用，请使用此值。例如，用于游戏应用，该应用可以占据整个屏幕，而没有任何浏览器控件可见，从而提供完全沉浸式的游戏体验。

注意： 清单的 display 成员的 fullscreen 值独立于 全屏 API。fullscreen 显示模式会更改整个浏览器窗口的状态为全屏，而全屏 API 只使窗口内的特定元素进入全屏。因此，Web 应用可以处于 fullscreen 显示模式，同时 Document.fullscreenElement 为 null 且 Document.fullscreenEnabled 为 false。

standalone

以独立原生应用的外观和感觉打开应用。这可能包括应用拥有自己的窗口以及应用启动器中的图标。浏览器将排除 URL 栏等 UI 元素，但仍可包含状态栏等其他 UI 元素。例如，用于任务管理器应用，该应用将在自己的窗口中打开，没有浏览器的 URL 栏，但仍显示设备的电池和通知状态栏，从而提供集成体验。

minimal-ui

以独立应用的外观和感觉打开应用，但带有最少量的导航 UI 元素。具体元素可能因浏览器而异，但通常包括后退、前进、刷新等导航控件，以及可能查看应用 URL 的方式。此外，浏览器可能包含提供共享和打印内容功能的特定于平台的 UI 元素。对于显示最少浏览器界面有益的应用，请使用此值。例如，用于新闻阅读或其他通用阅读应用，这些应用只显示最基本的浏览器控件，如后退和刷新按钮，从而提供更简洁、不那么分散注意力的界面。

browser

以常规浏览器标签页或新窗口打开应用，使用特定于平台的打开链接的约定。对于设计用于在浏览器上下文中使用的应用，并且需要完整的浏览器功能，请使用此值。如果未指定 display 模式，则这是默认值。

描述

浏览器将 display 模式应用于 应用上下文 后，它将成为顶层浏览上下文的默认显示模式。浏览器出于安全原因可能会覆盖此显示模式，或为用户提供切换到其他 display 模式的手段。

如果浏览器不支持指定的显示模式，它将遵循预定义的备用链：fullscreen → standalone → minimal-ui → browser。

可以使用 display-mode 媒体功能，根据当前的 display 模式配置应用程序样式和其他行为。这有助于提供一致的用户体验，无论网站是从 URL 还是从桌面图标启动的。

如下面的代码所示，您可以根据使用的 display-mode 调整应用的样式。

@media (display-mode: standalone) {
  body {
    background-color: #f0f0f0; /* Light grey background for standalone mode */
  }
}

@media (display-mode: fullscreen) {
  body {
    background-color: black; /* Black background for fullscreen mode */
  }
}

示例

指定独立显示模式

以下是名为“HackerWeb”的 Web 应用的示例清单文件，它定义了应用在安装在用户设备上时应如何显示和行为。display 成员设置为 standalone，它指定应用应在单独的窗口中打开，而没有通常的浏览器 UI 元素，如 URL 栏。

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "white",
  "description": "A readable Hacker News app",
  "icons": [
    {
      "src": "images/icons/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

规范

浏览器兼容性