iOS 8 status bar overlay + footer 'bar' in HomeScreen web applications

问题

When working with a web application after having installed it to 'home', it seems like a most recent update to iOS has caused the usual black status bar to go transparent and float above the web content below it.

Also, not pictured, is a horizontal bar at the footer of the app that pushes my fixed footer about 20px up.

I don't expect to always be serving this application via iPad (most clients would opt for the lesser expensive Android option), however it is very common for my associates to be demonstrating the application with their own iPads...

What options do I have here? Will I need to do some 'sniffing' and shift the application down just for this device/version? If so, what is the best way to do this without introducing more libraries? I'm currently using the latest Angular framework + .NET 4.5.1.

Thanks.

回答1:

Well, since there was obviously a whole lot of interest in this question, I have since found an answer to the problems.

In the root of the application I created the test for modern iOS 8

var userAgent = navigator.userAgent;
$rootScope.isIOS = ( userAgent.match(/(iPad|iPhone|iPod)/g) && userAgent.match(/(OS 8_0_)/g) ? true : false );

In the primary wrapper before the navigation element I conditionally place a block

<div ng-if="isIOS" class="isIOS">&nbsp;</div>

Then I have the sass class

.isIOS {
    position: fixed;
    z-index: 10000;
    top:0;
    width: 100%;
    height: 23px;
    background: $fooColor;

    & + div {
        margin-top: 25px;
    }
}

and the TOP is taken care of...the status bar has a background that stays fixed and scrolling through any of the pages looks great.

The space I encountered at the bottom was a little different and required the following meta-data in the base layout.

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

Anyways...all is good now. If you came here and found this and it helps, awesome. If you never came here it all then it really doesn't matter a whole bunch, now does it?

来源：https://stackoverflow.com/questions/26221394/ios-8-status-bar-overlay-footer-bar-in-homescreen-web-applications

标签

css

angularjs

safari

ios8

statusbar