在 Web 應用程序中隱藏 iPhone 狀態欄？

Question

有沒有辦法禁用 iPhone 網絡應用程序中的狀態欄？ 我正在做一些需要固定全屏視圖的工作，狀態欄很煩人。

Answer 1

這不可能。

Answer 2

不幸的是，沒有。 只有兩個選項black和black-translucent 。 請注意，使用black-translucent的 web 框架部分將在狀態欄下部分可見，而使用black實際上會將 web 框架向下推，因此它的高度要小一些。

這是 Apple 在他們的文檔中所說的：

<meta name="apple-mobile-web-app-status-bar-style" content="black">

除非您首先按照“apple-mobile-web-app-capable”中的說明指定全屏模式，否則此元標記無效。

如果content設置為default ，狀態欄顯示正常。 如果設置為black ，則狀態欄具有黑色背景。 如果設置為black-translucent ，則狀態欄為黑色半透明。 如果設置為default或black ，則 Web 內容顯示在狀態欄下方。 如果設置為black-translucent ，網頁內容將顯示在整個屏幕上，部分被狀態欄遮擋。 默認值為default 。

Answer 3

我能得到的最接近的（iOS7，我認為 iOS6 會顯示變暗的狀態欄）顯示狀態欄但具有透明背景，並且不會下推頁面內容； 所以你會在你的應用程序頂部看到網絡連接時間和電池百分比和時間。

meta tags:
name="apple-mobile-web-app-capable" content="yes"
name="apple-mobile-web-app-status-bar-style" content="black-translucent"

此外，要查看任何更改，您需要從主屏幕中刪除該應用程序，然后重新添加。

正如andyg303所提到的：

minimum-ui 可能適用於測試版，但經過測試，不適用於 iPhone (iOS 7.1.2 4s) 或 iPad (v2 7.1.2)。

Answer 4

我已經看到您可能必須從主屏幕中刪除 Web 應用程序，然后再次添加它（如果您添加了元標記），它會有所作為。 為我工作。

Answer 5

至少現在，這是可能的。 您需要將manifest.json添加到您的 index.html：

<link rel="manifest" href="manifest.json">

在 Angular、React 或 Vue 等項目中，不要忘記將此文件包含在資產中，否則您的瀏覽器將不知道此文件。

你可以像這樣構建你的 manifest.json

{
   "name": "Your App-name",
   "short_name": "short",
   "display": "standalone",
   "orientation": "landscape",
   "start_url": "http://linkToYourSite:4200",
   "scope": "http://linkToYourSite:4200",
   "icons": [{
        "src": "assets/images/logo.png",
        "sizes": "64x64",
        "type": "image/png"
    }]
}

start_url 和范圍必須相同或 start_url 至少在范圍內。 如果您隨后將您的應用程序另存為設備上的漸進式 Web 應用程序，則范圍內的所有頁面都將顯示而沒有狀態欄。

Answer 6

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">可能是部分解決方案：

https://i.stack.imgur.com/Ylhxt.png https://i.stack.imgur.com/lgGJV.png

您可以看到狀態欄上的文本可以隱藏在白色背景中，但是當您滾動時，文本仍然存在。

Answer 7

它是在 iOS 7.1 中添加的

只需將 minimum-ui 添加到視口元標記，例如：

取自此處： https : //forums.whirlpool.net.au/archive/2194915

請注意，據我所知，這只適用於 iPhone，不適用於 iPad

Answer 8

<meta name="apple-mobile-web-app-capable" content="yes" />