iOS 7 web app status bar

Question

I'm building an iOS web app. Since updating to iOS 7 I'm noticing the status bar has a number of issues. I'd like to get the status bar to show as white with black text/icons but I can't seem to figure it out.

The meta tags I've tried are:

Shows just an empty black bar and shifts content down:

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

Shows a black bar with white text/icons:

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

Shows a white bar with white text/icons:

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

Any ideas about what I'm doing wrong or how to get the status bar to show up as a white background with black text?

mobilexweb.com/blog/safari-ios7-html5-problems-apis-review claims that your last one should be OK. Maybe it depends on the background colour of the page? — Dave
If set to black-translucent, the status bar is black and translucent. — Hossein

BVSK BVSK · Accepted Answer · 2013-11-14T21:55:23

"translucent" does work for iPhones, but it is hit or miss.

You might get lucky by putting some css inside of
@media only screen (height: "iPHONES HEIGHTs"px) and (width: 320px) { }.

The only way I got it to work on my iPad is by saving the webpage as translucentthen changing the webpage to "black-translucent" and relaunching the webapp.

7.0.4 came out today and it's still a problem. Come'on Apple :(

iOS 7 web app status bar

3 Answers