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

问题:

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?

回答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.

回答2:

Struggling with this problem and considering what's being said around the web I decided to create something that might help you out. I'll explain it step-by-step.

I set the status bar to black-translucent through the meta tag.

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

Then I created an empty div at the very top of the body.

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

Afterwards I added the following piece of PHP to the head-section. It checks the user-agent to find out whether the device is an iPhone. It then checks for the absence of Safari. If this is both the case, we've found a web app and we specify the css for the div we created. Else, we hide the div.

<?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
$iphone = strpos($ua,"iPhone");
$safari = strpos($ua,"Safari"); 
if ($iphone == true && $safari == false){
    echo '<style type="text/css"> div#statusbar{ background: navy; height: 15pt; width:100%; position:-webkit-sticky; top:0;} </style>';
}
else{
    echo '<style type="text/css"> div#statusbar{ display:none;} </style>';
}
?>

The CSS gives the bar a navy blue color that you probably want to change. It positions the bar as a sticky element on the very top of the page. It's not fixed because it would overlap the content below. However, for some reason sticky stops working halfway the page, something I'm still trying to debug.

This solution is not perfect, but it's at least something that you can have full control on, in contrast with other solutions. Improvements are always welcome.

回答3:

You can do it easly with Jquery / javascript

if (window.navigator.standalone) {
    document.write("<style>#maindiv{padding-top:20px;background-color: #D83F3F}</style>");
    //or
    $("#maindiv").addClass("standalone");
}

and some css

.standalone{
    padding-top: 20px;
    background-color: #D83F3F;
}