it-swarm.asia

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

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

What I want to change

16
Edvard

我正在使用这个,而ios有其他答案中提到的bug。

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

<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。

13
Mikko Tapionlinna

更新3

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

更新2

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

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

更新

仍然是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行为。

enter image description here

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

7
Ray Shan

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

4
Civilian

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

身体{
背景颜色:蓝色;/*为色调*/
 background-image:线性渐变(到底部,绿色0%,绿色100%);/*为身体*/
} 

来自 http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

0
Patrick