Phonegap iOS 11 显示栏答案

【问题标题】：Phone gap iOS11 Display BarPhonegap iOS 11 显示栏
【发布时间】：2017-08-22 12:16:43
【问题描述】：

刚刚下载了 iOS 11 的 beta 版本来测试我的应用程序，状态栏（电池和时钟所在的位置）显示为灰色，而不是正文中设置的背景颜色。我的应用在 iOS 10 上没有问题。

其他人有同样的问题吗？

谢谢

【问题讨论】：

【解决方案1】：

除了添加新的viewport-fit=cover 元标记外，您还需要处理由于摄像头和扬声器的缺口，在 iPhone X 上状态栏大于 20 像素的事实。

您可以使用 iOS 11 中的新 safe-area-inset-* 常量在 CSS 中自动处理此问题。即padding-top: constant(safe-area-inset-top);

如果你好奇的话，我写了一些关于这些变化和新的 CSS 常量的文章：https://ayogo.com/blog/ios11-viewport/

【讨论】：

【解决方案2】：

回答！！将此作为您的新元标记！

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

【讨论】：

【解决方案3】：

将 viewport-fit=cover 添加到您的视口元标记将扩展您的网站以填满整个屏幕，而不仅仅是安全区域。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

安全区域插入-*

注意：为了处理可能需要的任何调整，iOS 11 版本的 Safari 包含一些可以在使用 viewport-fit=cover 时使用的常量.

填充：常量（安全区域插入左）；
.. 安全区插入顶部安全区域插入权安全区域插入左安全区域插入底部

【讨论】：