viewport-fit=cover 不将视口扩展到 iOS Safari 上的状态栏区域（缺口附近）答案

【问题标题】：viewport-fit=cover not extending viewport into status bar area (around notch) on iOS Safariviewport-fit=cover 不将视口扩展到 iOS Safari 上的状态栏区域（缺口附近）
【发布时间】：2021-10-24 09:43:21
【问题描述】：

在我的 PWA 中，我已经设置了

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover" />

我也有

<meta name="apple-mobile-web-app-capable" content="yes" /> 我认为这是鼓励视图进入独立模式所必需的。

我读过的所有文档都说这应该足以强制 PWA 进入全屏模式，但它没有发生。

无论我尝试什么，视口都会继续在状态栏下开始。

还有什么事情需要发生才能让事情“向上”吗？

（在 Safari 14 和 15 上测试）

【问题讨论】：

标签： ios progressive-web-apps

【解决方案1】：

经过进一步的实验，事实证明this post 中的所有内容都是正确的：

您确实需要具有值为 viewport-fit=cover 和 apple-mobile-web-app-capable 元集的 viewport 元标记，但您还需要拥有

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

这是一个真正的痛苦。如果您的应用在浅色模式下是浅色的，而在深色模式下是深色的，那么这个值基本上是无用的，因为状态栏文本在浅色模式下是白色的，而在深色模式下是深色的。没有替代价值可以起到相反的作用。

在第一次加载 PWA 后更改此元标记的值不会改变任何内容。其他元标记会响应更改，但apple-mobile-web-app-status-bar-style 似乎在首次加载后被锁定。要更新它，需要删除主屏幕快捷方式并重新添加 PWA。

Maximiliano 还对changes to the status bar values in iOS Safari 14.5 here 做了一些很好的观察。 Safari 15 中似乎没有对此进行很好的更新。

【讨论】：