iOS 7 网络应用状态栏答案

【问题标题】：iOS 7 web app status bariOS 7 网络应用状态栏
【发布时间】：2013-09-26 19:47:50
【问题描述】：

我正在构建一个 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" />

关于我做错了什么或如何让状态栏显示为带有黑色文本的白色背景的任何想法？

【问题讨论】：

mobilexweb.com/blog/safari-ios7-html5-problems-apis-review 声称您的最后一个应该没问题。也许这取决于页面的背景颜色？
如果设置为black-translucent，状态栏为黑色半透明。

【解决方案1】：

"translucent" 确实适用于 iPhone，但它是命中注定的。

在
@media only screen (height: "iPHONES HEIGHTs"px) and (width: 320px) { } 中添加一些 css 可能会很幸运。

我让它在我的 iPad 上运行的唯一方法是将网页保存为 translucent然后将网页更改为 "black-translucent" 并重新启动 web 应用程序。

7.0.4 今天出来了，还是有问题。加油苹果:(

【讨论】：

【解决方案2】：

我正在构建一个 iOS 网络应用程序。自从更新到 iOS 7 后，我注意到状态栏有很多问题。我想让状态栏显示为带有黑色文本/图标的白色，但我似乎无法弄清楚。

我做到了。这是给你的答案。

点是;应用程序应以“黑色半透明”保存到主屏幕，但以“默认”运行。

【讨论】：

对不起，我出于某种原因删除了 repo。但是，当您的 WebApp 将从用户的主屏幕打开时，使用 Javascript 将 META 标签的值从“黑色半透明”更改为“默认”，您可以解决这种情况。
(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); } }( ));

【解决方案3】：

如果您删除此元行，请将您的背景颜色设为白色，它将显示一个白色状态栏。

浏览器将对您的身体背景颜色进行着色。据我检查并通知您的状态栏。它似乎都集成在浏览器框架中

【讨论】：

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