Safari 11.3.1 状态栏白底白字答案

【问题标题】：Safari 11.3.1 status bar turned white on whiteSafari 11.3.1 状态栏白底白字
【发布时间】：2018-10-05 09:48:41
【问题描述】：

我刚刚将 iPhone 7 上的 iOS 更新到 11.3.1。当我将我的 web 应用程序添加到首页（独立模式）时，状态栏（带有连接信息的顶部）现在显示为纯白条（白底白字）。

我试过了：

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
完全删除元标记。

一切都无济于事。我真的不在乎它是什么颜色，但白条看起来很笨。有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

在 Reddit 上查看 this link。使用...

<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#000000">

...是我获得带有白色文本的黑色状态栏的唯一方法。 iOS 15.1、iPhone 11 专业版。

【讨论】：

【解决方案2】：

想通了。您需要将viewport-fit=cover 添加到您的视口元标记内容中。

显然，从最近开始，状态栏默认不会与内容重叠。此设置将覆盖它。所以你的视口元标记可能看起来像这样：

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

【讨论】：

只是提醒其他人，viewport-fit=cover 与notch support 相关。如果你依赖body { height: 100%; }之类的东西，设置viewport-fit=cover将不再覆盖整个页面（你需要做height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));）。