顯示

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