我有一个带有半透明黑色状态栏的全屏网络应用程序。 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;} 不起作用，状态栏仍然亮着。
最佳答案
问题的原因是 iPhone X(又名新的 IE6)，并且带有“凹口”的曲面屏幕使 Apple 做出“更好且实用”的决定，在以下位置使用 if错误的地方。
让我解释一下: XCode 9+ 制作的 WebApps(当前目标为 iOS11+)包含一个新功能(也称为 bug)。他们现在使用与您的内容重叠的安全区域。这是针对将在弯曲/圆形屏幕(智能 watch 等)中显示的网络应用程序的 W3 标准。
现在“永远”，主要是在混合应用程序(Cordova、Ionic 等)中。如果我们想隐藏状态栏，我们需要更加小心，并且主要使用 *position:fixed*，在 viewport 元标记中将 viewport-fit 属性集添加到 cover。
<meta name="viewport" content="viewport-fit=cover" />
这不会影响当前的大部分网站，但是，在全屏应用程序中，如果您不将 attr 设置为 cover，WebView 会插入 20px 间隙(状态栏大小)。有一段时间，我们要求苹果将其添加为默认设置，但现在，这会影响整个网络，损害单个设备的利益。事实上，滚动条也添加了“padding-top:20px”，但是，它们不会 overflow hidden 的内容。
下面的“技巧”可能会对您有所帮助:
为 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 应用程序颜色状态栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46476265/