iOS的全屏Web App的颜色状态栏

Question

我有一个半透明的黑色状态栏全屏的Web应用程序。身体标记的背景是＃333。

为了强调一个模式，我想变黑的所有内容。如果我使用的覆盖DIV具有以下属性，它不包括状态栏的背景。

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

有谁知道我可以变暗状态栏？ （不必直接改变身体标记的颜色）

仅供参考，我的web应用程序meta标签是：

<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：{顶：-20px;}不起作用，状态栏IST依然清淡。

Answer 1

你的问题的原因是iPhone X（又名新IE6），以及您以“争创一流”的弧形屏幕让苹果使用“更好，实用”的决定是在错误的地方使用if。

让我来解释：通过了XCode 9+与当前目标作出iOS11的WebApp +包含一个新功能（又名错误）。他们现在使用overlaping您的内容安全地带。这是一个W3标准web应用将被显示在弯曲/圆形屏幕（智能手表，和同类者）。

现在，“永远”，主要是混合动力汽车的应用程序（科尔多瓦，离子，等一切），我们需要更加小心，如果我们想隐藏状态栏，以及主要与*position: fixed*，加入viewport-fit属性设置在cover元标记viewport。

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

这并不是主要影响的当前地点，但是，在全屏应用程序，如果你不可以设置attr覆盖，web视图中插入一个20像素的差距（状态栏的大小）。有一段时间，我们要求苹果增加了设置为默认，但是，现在，这会影响在单个设备的损害整个网络。事实上，滚动条增加了“填充顶：20px的”过，但是，他们并不隐瞒被任命为溢出的内容。

该“黑客”下面可以帮助你：

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

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