Question

我有一个带半透明黑色状态栏的全屏网络应用。身体标签的背景是＃333。

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

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

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

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

<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），以及带有＆＃34;缺口＆＃34;的曲面屏幕。让Apple使用＆＃34;更好，更实用＆＃34;决定在错误的地方使用if。

让我解释一下： 由XCode 9+制作的当前目标为iOS11 +的WebApps包含一个新功能（又称bug）。他们现在使用覆盖您内容的安全区域。这是一个W3标准的webapps，将以弧形/圆形屏幕（智能手表和类似物）显示。

现在＆＃34;永远＆＃34;，主要在混合动力应用程序（Cordova，Ionic等等）中，如果我们想隐藏状态栏，我们需要更加小心，主要是*position: fixed*，在viewport-fit元标记中将cover属性集添加到viewport。

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

这并不会影响当前网站，但是，如果您不设置attr来覆盖全屏应用，则WebView会插入20px的间隙（状态栏大小）。有一段时间，我们要求Apple将其添加为默认值，但现在，这会影响整个网络而不利于单个设备。实际上，滚动条添加了＆＃34; padding-top：20px＆＃34;也是，但是，他们不会隐藏被溢出的内容。

＆＃34; hacks＆＃34;以下可能对您有所帮助：

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

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

1 个答案: