在Safari和Chrome中更改iOS 7状态栏的颜色 [英] Change the color of the iOS 7 status bar in Safari and Chrome

问题描述

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

I want to change the color of the iOS 7 status bar in Safari and Chrome. I'm working on a mobile web app and would like it to feel native and right now, I just get a white status bar.

推荐答案

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

I'm using this while ios has the bug mentioned in other answers.

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

First I set the statusbar with this:

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

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

For me, that sets the text white and background transparent. It also floats over my content.

然后我跟随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;
}

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

With this approach I have a dark background on my statusbar with some transparency.

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

I have not tested this with ios6 and it will probably break once Apple fixes the bug. Also it looks a bit off when scrolling to the top and the bounce effect moves the background from below the statusbar.

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

Still, it's quite easy fix for now and mostly CSS.

这篇关于在Safari和Chrome中更改iOS 7状态栏的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！