Javascript 在 Web 应用程序中隐藏 iPhone 状态栏？

Hide the iPhone status bar in a web application?

提问by Stefan Kendall

Is there a way to disable the status bar in iPhone web apps? I'm working on something that requires a fixed, fullscreen view, and the status bar is rather annoying.

有没有办法禁用 iPhone 网络应用程序中的状态栏？我正在做一些需要固定全屏视图的工作，状态栏很烦人。

回答by Stefan Kendall

This is not possible.

这不可能。

回答by Ryan

Unfortunatly, no. There are only two options blackand black-translucent. Just note that with black-translucentpart of the web frame will be partially visible under the status bar while using blackactually pushes the web frame down so it's height is a little smaller.

不幸的是，没有。只有两个选项black和black-translucent。请注意，black-translucent当使用black实际将 Web 框架向下推时，它的一部分将在状态栏下部分可见，因此它的高度要小一些。

This is what Apple says in their documentation:

这是 Apple 在他们的文档中所说的：

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

This meta tag has no effect unless you first specify full-screen mode as described in “apple-mobile-web-app-capable.”

If contentis set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to defaultor black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

除非您首先按照“apple-mobile-web-app-capable”中的说明指定全屏模式，否则此元标记无效。

如果content设置为default，状态栏显示正常。如果设置为black，则状态栏具有黑色背景。如果设置为black-translucent，状态栏是黑色半透明的。如果设置为default或black，Web 内容将显示在状态栏下方。如果设置为black-translucent，Web 内容将显示在整个屏幕上，部分被状态栏遮挡。默认值为default。

回答by Yousef Bourne

The closest I could get (iOS7, I think iOS6 would show darkened status bar) shows the status bar but with a transparent background and does not push down the content of the page; so you would see the network connection time and battery percent and time at the top of your app.

我能得到的最接近的（iOS7，我认为 iOS6 会显示变暗的状态栏）显示状态栏但具有透明背景，并且不会下推页面内容；所以你会在你的应用程序顶部看到网络连接时间和电池百分比和时间。

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

Also, to view any changes requires you to delete the app from your homescreen then add it back again.

此外，要查看任何更改，您需要从主屏幕中删除该应用程序，然后重新添加。

As mentioned by andyg303:

正如andyg303所提到的：

minimal-ui might have worked on beta, but tested and doesn't work on iPhone (iOS 7.1.2 4s) or iPad (v2 7.1.2).

minimum-ui 可能适用于测试版，但经过测试，不适用于 iPhone (iOS 7.1.2 4s) 或 iPad (v2 7.1.2)。

回答by Tobias Nurmiranta

I've seen that you might have to remove the web application from your home screen, and then add it again, if you've added the meta tag, for it to make any difference. Worked for me.

我已经看到您可能必须从主屏幕中删除 Web 应用程序，然后再次添加它（如果您添加了元标记），它会有所作为。为我工作。

回答by Crist Xiaotian Ye

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">may be a partial solution:

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

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

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

You can see that the text on status bar can be hidden in the white background, but when you're scrolling, the text will still be there.

您可以看到状态栏上的文本可以隐藏在白色背景中，但是当您滚动时，文本仍然存在。

回答by andyg303

It was added in iOS 7.1

它是在 iOS 7.1 中添加的

Simply add minimal-ui to the viewport meta tag, e.g:

只需将 minimum-ui 添加到视口元标记，例如：

Taken from here: https://forums.whirlpool.net.au/archive/2194915

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

Please note this only works for iPhone as far as I am aware, not iPad

请注意，据我所知，这只适用于 iPhone，不适用于 iPad

回答by CiNN

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