iOS 8的状态栏覆盖+页脚“酒吧”主屏幕中的Web应用程序 [英] iOS 8 status bar overlay + footer 'bar' in HomeScreen web applications

问题描述

在具有安装它'家'之后的Web应用程序时，它似乎是一个最新的更新到iOS已经引起了一贯的黑色状态栏变成透明，并漂浮在它下面的网页内容。

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.

另外，无图，就是在那个推我的约20像素高达固定页脚应用的页脚单杠。

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

我不希望总是通过提供服务的iPad这个应用程序（大多数客户会选择较小的Andr​​oid昂贵的选项），但它是很常见的我的同事是用自己的iPad演示应用...

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

什么选择我都在这里吗？我需要做一些'嗅'倒腾申请下来只为这个设备/版本？如果是这样，什么是要做到这一点，而不会引入更多的库的最佳方式？我目前使用的是最新角框架+ .NET 4.5.1。

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.

感谢。

推荐答案

好吧，既然有明显这个问题一大堆的兴趣，因为我已经找到了答案的问题。

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

在我创建了测试现代的iOS 8

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>

然后我有青菜类

.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?

这篇关于iOS 8的状态栏覆盖+页脚“酒吧”主屏幕中的Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！