Change the color of the iOS 7 status bar in Safari and Chrome

Question

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.

Answer 1

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.

Then I have following 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.

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.

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

Answer 2

Update 3

minimal-ui was removed in iOS 8 :( More info here: iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions?

Update 2

A different bug now appears in iOS 7.1. No matter what content is set to, and regardless of page's background-color, the status bar is always translucent when user added the web app to home screen. See demo here.

Note that iOS 7.1 introduced a new tag called minimal-ui, which helps to hide browser chrome in Mobile Safari, but does nothing when added to home screen. More detail here.

Update

Still a bug in 7.0.4.

---

There appears to be a bug as of iOS 7.0.3.

Not having <meta name="apple-mobile-web-app-status-bar-style"> defined or defining it as content="default" = black background with black text.

content="black" = black background with white text.

content="black-translucent" = black background with white text if canvas background isn't pure white (FFF). Or translucent background with black text if background is white.

Any other content value such as white doesn't work and default behavior is exhibited.

Confirmed by this reference: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Answer 3

I've been looking for a way to do the same thing. The only options I've seen so far involve using one of these three meta tag's in the of your html document.

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

<meta name="apple-mobile-web-app-status-bar-style" content="black"> This makes the status bar black and pushes the content below the status bar.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> This makes the content go behind the status bar.