在 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" />