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"
    }
  ]
}

規範

瀏覽器相容性