在Safari和Chrome中更改iOS 7状态栏的颜色

Question

我想在Safari和Chrome中更改iOS 7状态栏的颜色。我正在开发一个移动网络应用程序，并希望它现在感觉原生，我只是得到一个白色状态栏。

Answer 1

我正在使用这个，而ios有其他答案中提到的错误。

首先我用这个设置状态栏：

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

对我来说，这会将文本设置为白色和背景透明。它也浮在我的内容上。

然后我跟随css：

body{
    background:#dddddd;
}
body:before{
    display: block;
    content: " ";
    height:20px;
    top: 0;
    background:rgba(0,0,0,0.8);
    position:-webkit-sticky;
    position:sticky;
}

通过这种方法，我的状态栏上有一个黑暗的背景，有一些透明度。

我还没有用ios6对它进行测试，一旦Apple修复了这个bug，它可能会破坏。当滚动到顶部并且弹跳效果从状态栏下方移动背景时，它看起来有点偏。

但是，现在很容易修复，主要是CSS。

Answer 2

更新3

在iOS 8中删除了

minimal-ui :(更多信息，请点击此处： iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions?

更新2

iOS 7.1中现在出现了另一个错误。无论content设置为什么，并且无论网页的background-color如何，当用户将网络应用添加到主屏幕时，状态栏始终是半透明的。请参阅演示here。

请注意，iOS 7.1引入了一个名为minimal-ui的新标记，它有助于在Mobile Safari中隐藏浏览器镶边，但在添加到主屏幕时不执行任何操作。更多细节here。

更新

7.0.4仍是一个错误。

---

iOS 7.0.3似乎存在错误。

没有<meta name="apple-mobile-web-app-status-bar-style">定义或将其定义为content="default" =黑色背景黑色文字。

content="black" =黑色背景，白色文字。

content="black-translucent" =如果画布背景不是纯白色（FFF），则带有白色文字的黑色背景。或者如果背景是白色的半透明背景与黑色文本。

任何其他content值（例如white）都不起作用，并且会显示default行为。

此参考资料证实： http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Answer 3

我一直在寻找一种方法来做同样的事情。到目前为止我见过的唯一选项涉及在你的html文档中使用这三个元标记中的一个。

<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"> 这使得内容落后于状态栏。

Answer 4

您可以通过更改正文的背景颜色来影响Safari中顶栏的色调

body {
  background-color: blue; /* for the tint */
  background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */
}

通过http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review