16

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

我想改变什么

4

4 回答 4

13

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

于 2014-01-20T21:04:47.223 回答
7

更新 3

minimal-ui已在 iOS 8 中删除 :( 更多信息： iOS 8 删除了“minimal-ui”视口属性，还有其他“软全屏”解决方案吗？

更新 2

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

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

更新

仍然是 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

于 2013-10-24T05:47:41.430 回答
5

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

于 2013-10-01T20:21:00.140 回答
0

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

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

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

于 2013-10-16T04:45:30.617 回答