How to set the status bar color in an iOS 7 web app?

Question

In iOS 7, many apps are changing the appearance of the status bar and clearly something has changed to the status bar of web apps as well. It looked like web app developers would be able to influence the color of the bar, but this didn't turn out to be easy.

How can we still change this status bar color in our web apps?

Answer 1

Thanks for your start stjin, I managed to take it and make it work.

You're having problems with position: -webkit-stickey. Thats not a great solution.

Tried and tested position fixed worked for me. I also added a few things to make it Bootstrap 3.0 compatible. See below:

First

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

Then

<div id="statusbar"> </div>

Finally

        <?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
$iphone = strpos($ua,"iPhone");
$safari = strpos($ua,"Safari"); 
if ($iphone == true && $safari == false){
    echo '<style type="text/css"> #statusbar{ background: red; width:100%; position: fixed; top:0; opacity: 0.95; z-index: 1030;} .navbar {margin-top: 15pt;}</style>';
}
else{
    echo '<style type="text/css"> #statusbar{ display:none;} </style>';
}
?>

You also had the else class set to #sidebar not #statusbar. I changed that for you.

If you don't want bootstrap compatibility then remove .navbar and associated styles, z-index is not necessary either. I also added a little bit of opacity to give it a little more iOS7 flavour.

Again, thanks @stjin - you helped me get what I wanted. Head over to www.montessoricommons.cc and add to home screen to see it in action.