viewport fit=覆盖在iOS Safari中不将视口延伸到状态栏区域(围绕凹槽)
在我的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上测试)
回答 1
Stack Overflow用户
发布于 2021-10-25 07:50:44
经过进一步的实验，结果证明this post中的一切都是正确的：
- 您确实需要具有值为
viewport-fit=cover的viewport元标记，并且设置了apple-mobile-web-app-capable元标记，但是您还需要使用来设置
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
这是一个真正的痛苦。如果你的应用程序在亮模式下是亮的，在暗模式下是暗的，那么这个值基本上是无用的，因为状态栏文本在亮模式下是白色的，在暗模式下是暗的。没有与之相反的替代值。
在第一次加载PWA之后更改此meta标记的值不会改变任何内容。其他元标签将响应更改，但apple-mobile-web-app-status-bar-style似乎在第一次加载后被锁定。要更新它，需要删除主屏幕快捷方式并重新添加PWA。
Maximiliano也对changes to the status bar values in iOS Safari 14.5 here做了一些很好的观察。在Safari 15中似乎没有很好的更新。
https://stackoverflow.com/questions/69695538
复制相似问题
腾讯云开发者
