HomeScreen Web应用程序中的iOS 8状态栏覆盖+页脚"栏"

Question

在将其安装到"主页"后使用Web应用程序时,似乎iOS的最新更新导致通常的黑色状态栏变为透明并浮动在其下方的Web内容之上.

此外,没有图片,在应用程序的页脚是一个水平栏,推动我的固定页脚大约20px.

我不希望总是通过iPad服务这个应用程序(大多数客户会选择较便宜的Android选项),但是我的同事用他们自己的iPad演示应用程序是很常见的...

我有什么选择？我是否需要做一些'嗅探'并将应用程序转移到这个设备/版本？如果是这样,在不引入更多库的情况下,最好的方法是什么？我目前正在使用最新的Angular框架+ .NET 4.5.1.

谢谢.

Answer 1

好吧,因为这个问题显然引起了很大的兴趣,所以我找到了问题的答案.

在应用程序的根目录中,我为现代iOS 8创建了测试

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

在导航元素之前的主包装中,我有条件地放置一个块

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

然后我有sass课

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

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

并且TOP处理...状态栏的背景保持固定,滚动浏览任何页面看起来都很棒.

我在底部遇到的空间有点不同,并且在基本布局中需要以下元数据.

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

无论如何......一切都很好.如果你来到这里发现了这个并且它有所帮助,真棒.如果你从来没有来过这一切那么它真的并不重要,现在呢？