【问题标题】: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=coverapple-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 中似乎没有对此进行很好的更新。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-04-22
      • 1970-01-01
      • 1970-01-01
      • 2018-03-11
      • 2016-09-12
      • 2019-03-25
      • 1970-01-01
      相关资源
      最近更新 更多