iOS webapp状态栏不一致答案

【问题标题】：iOS webapp status bar inconsistentiOS webapp状态栏不一致
【发布时间】：2018-01-20 03:42:08
【问题描述】：

在制作 web 应用程序时，我试图让状态栏透明，但阅读大量文档后，我认为这已被弃用，因此使用 default：

在开发过程中有一段时间突然变成这样：

在这种情况下，无论我如何重新加载所有内容，它都会继续工作。但我无法让它在其他情况下工作。

这是我在 index.php 上的标头中的代码

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="img/appiconTAD.png">
<!-- <link rel="apple-touch-startup-image" href="img/splashScreen.png"> -->
<meta charset="UTF-8">
<title>take a dare</title>
<link href="css/style.css?v1" rel="stylesheet">
<link href="css/main.css?v1" rel="stylesheet">

有什么想法吗？

值得注意的是，我正在使用 IOS dev beta 11.5

【问题讨论】：

如果可以，请粘贴 <head> 代码。
@nathan 已发布！

标签： ios web-applications statusbar iphone-standalone-web-app

【解决方案1】：

当设置为 black-translucent 时，似乎在 iOS 11 中状态栏不再与内容重叠。因此状态会显示您的应用背景颜色。

【讨论】：

这对非 ios11 用户来说太棒了，但可悲
我对此进行了一些实验，发现了一些奇怪的行为。状态栏确实占据了 20 像素，并且内容似乎在其下方滚动。顶部 -20px 的固定定位元素被状态栏截断。内容仍在状态栏下方滚动并且可见。
使用 translateY(-20px) 将一个固定位置的元素推到状态栏下方只会在内容在其下方滚动时显示。