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

Question

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

Answer 1

更新 3

minimal-ui 在 iOS 8 中被删除 :( 更多信息： iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions?

更新 2

现在 iOS 7.1 中出现了一个不同的错误。无论content 设置为什么，无论页面的background-color 是什么，当用户将Web 应用程序添加到主屏幕时，状态栏始终是半透明的。见演示here。

请注意，iOS 7.1 引入了一个名为 minimal-ui 的新标签，它有助于在 Mobile Safari 中隐藏浏览器 chrome，但添加到主屏幕时不会执行任何操作。更多详情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 2

我正在使用这个，而 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 3

您可以通过更改主体的背景颜色来影响 safari 顶部栏的色调

身体 { 背景颜色：蓝色； /* 用于色调 */ 背景图像：线性渐变（到底部，绿色 0%，绿色 100%）； /* 为身体 */ }

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

Answer 4

我一直在寻找一种方法来做同样的事情。到目前为止，我看到的唯一选项涉及在您的 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"> 这使内容位于状态栏后面。