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?

Answer 1

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.

I did it. Here is answer for you.

https://github.com/BYODKM/pwdGen/blob/gh-pages/index.html#L8-L16

Point is; App should be saved with "black-translucent" onto Home Screen, but run with "default".

Answer 2

"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 :(

Answer 3

If you remove this meta line, make your background color white it will show a white status bar.

The browser will take a tint of your body background-color. As far as i checked and notices also for your statusbar. It seems all integrated in the browser frame