HomeScreen Web 应用程序中的 iOS 8 状态栏覆盖 + 页脚“栏”答案

【问题标题】：iOS 8 status bar overlay + footer 'bar' in HomeScreen web applicationsHomeScreen Web 应用程序中的 iOS 8 状态栏覆盖 + 页脚“栏”
【发布时间】：2014-10-06 17:20:29
【问题描述】：

在将 Web 应用程序安装到“主页”后使用它时，iOS 的最新更新似乎导致通常的黑色状态栏变为透明并漂浮在其下方的 Web 内容上方。

此外，未显示的是应用页脚处的一个水平条，它将我的固定页脚向上推了大约 20 像素。

我不希望总是通过 iPad 提供此应用程序（大多数客户会选择更便宜的 Android 选项），但是我的同事使用自己的 iPad 演示应用程序是很常见的...

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

谢谢。

【问题讨论】：

标签： css angularjs safari ios8 statusbar

【解决方案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"/>

无论如何...现在一切都很好。如果你来到这里发现了这个，它会有所帮助，太棒了。如果你从来没有来过这里，那么一大堆真的没关系，现在是吗？

【讨论】：