iOS 全屏 Web 应用程序颜色状态栏

Question

我有一个带有半透明黑色状态栏的全屏网络应用程序。body 标签的背景是#333。

为了强调模态，我想使所有内容变暗。如果我使用具有以下属性的叠加 div，它不会覆盖状态栏的背景。

div#overlay {
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  z-index: 100;
  width: 100vw;
  height: 100vh;
}

有人知道如何使状态栏变暗吗？（无需直接更改body标签的颜色）

仅供参考，我的网络应用元标记是：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

PS：{top: -20px;} 不起作用，状态栏仍然亮着。

Answer 1

您的问题的原因是 iPhone X（又名新 IE6），而带有“缺口”的曲面屏幕使 Apple 做出了“更好更实用”的决定，if在错误的地方使用了。

让我解释一下： 由 XCode 9+ 制作的当前目标为 iOS11+ 的 WebApps 包含一个新功能（又名错误）。他们现在使用与您的内容重叠的安全区域。这是将在曲面/圆形屏幕（智能手表和类似​​设备）中显示的 Web 应用程序的 W3 标准。

现在“永远”，主要是在混合应用程序（Cordova、Ionic 等）中，如果我们想隐藏状态栏，我们需要更加小心，主要是在元标记中*position: fixed*添加一个viewport-fit属性集。coverviewport

<meta name="viewport" content="viewport-fit=cover" />

这不会影响大多数当前站点，但是，在全屏应用程序中，如果您不将 attr 设置为覆盖，WebView 会插入 20px 间隙（状态栏大小）。有一段时间，我们要求 Apple 将其添加为默认设置，但现在，这会影响整个网络而损害单个设备。实际上，滚动条也添加了“padding-top: 20px”，但是，它们不会隐藏溢出的内容。

下面的“技巧”可能对您有所帮助：

为 iPhone X 设计网站 https://webkit.org/blog/7929/designing-websites-for-iphone-x/

在 iPhone X 上删除 Safari 中的白条 http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/