Question

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

其他人是否有同样的问题？

谢谢

Answer 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/

Answer 2

答案!!将其添加为新的元标记！

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

Answer 3

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

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

<强>安全区-插图 - *

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

填充：常量（safe-area-inset-left）;
.. 安全区 - 内陷式顶安全区 - 内陷式右安全区 - 内陷式左安全区-插页底