显示

display 成员的值为字符串。可能的值包括 fullscreen、standalone、minimal-ui 和 browser。如果浏览器不支持指定的显示模式，则它会遵循预定义的回退链：fullscreen → standalone → minimal-ui → 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 模式的方法。

使用display-mode 媒体功能来确定浏览器应用的当前 display 模式，这对于确保您的应用程序在不同的显示上下文中按预期运行非常有用。此外，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: #000000; /* Black background for fullscreen mode */
  }
}

以下名为“HackerWeb”的 Web 应用程序的示例清单文件定义了应用程序在安装到用户设备上时应如何显示和运行。display 成员设置为 standalone，这意味着应用程序应在单独的窗口中打开，而无需典型的浏览器 UI 元素（如 URL 栏）。

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