iOS 7网页应用程序状态栏

Question

我正在开发一个iOS网页应用。自从升级到iOS 7以来，我注意到状态栏出现了一些问题。我希望让状态栏显示为白色，并带有黑色文本/图标，但我似乎无法解决这个问题。

我尝试过的元标签包括：

只显示一个空的黑色条，并向下移动内容：

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

显示一个黑色条，带有白色文本/图标：

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

显示一个带有白色文本/图标的白色条：

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

任何关于我哪里做错了或如何使状态栏显示为白色背景黑色文字的想法吗？

- Phil

---

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review声称您的最后一个应该没问题。也许这取决于页面的背景颜色？ - Dave

如果设置为 “black-translucent”，状态栏将会是黑色和半透明的。 - Hossein

Answer 1

我正在开发一个iOS网页应用，自从更新到iOS 7以后，我注意到状态栏出现了一些问题。我希望将状态栏显示为白色，并带有黑色文本/图标，但我似乎无法解决这个问题。

我已经找到了答案给你。关于如何解决请移步https://github.com/BYODKM/pwdGen/blob/gh-pages/index.html#L8-L16。

要点是：应用程序应该使用“黑色半透明”保存到主屏幕上，但在运行时使用“默认”模式。

- Tomohiro

---

抱歉，我因为某些原因删除了该仓库。但是，当用户从主屏幕打开您的WebApp时，使用JavaScript将META标签的值从“black-translucent”更改为“default”，您可以解决此问题。 - Tomohiro

（function(){ if (!window.navigator.standalone) { var meta = document.createElement("meta"); meta.setAttribute("name", "apple-mobile-web-app-status-bar-style"); meta.setAttribute("content", "black-translucent"); var head = document.getElementsByTagName("head")[0]; head.appendChild(meta); } }()); - Tomohiro

Answer 2

"半透明"在iPhone上确实可行，但是有时会出现问题。

你可以尝试在以下css代码中加入一些内容：
@media only screen (height: "iPhone高度"px) and (width: 320px) { }。

我唯一让它在我的iPad上运行的方法是将网页保存为半透明，然后将网页更改为"黑色半透明"并重新启动webapp。

今天发布了7.0.4，但这仍然是一个问题。苹果快点解决吧 :(

- BVSK

Answer 3

如果您删除此元行并将背景颜色设置为白色，则会显示白色状态栏。

浏览器将采用您的 body 背景颜色的色调。就我所检查和注意到的情况而言，这也适用于您的状态栏。它似乎全部集成在浏览器框架中。

- Jos Koomen

---

您似乎是正确的，状态栏的色调将与应用程序的背景匹配。但是，无论我做什么，文本始终是白色的。因此，如果应用程序的背景是白色的，则文本是不可见的。我通过在应用程序顶部添加具有彩色背景的<div>来进行了一些解决方法，但这远非理想。 - Phil