gpt4 book ai didi

css - viewport-fit=cover 是否不再适用于 iOS Safari?

转载 作者:行者123 更新时间:2023-12-01 22:00:30 34 4
gpt4 key购买 nike

我希望在 iOS Safari 上使用 100% 的屏幕宽度作为 notched iOS/Android device 上的网站标题。为了实现这一点,我在我的页面 <head></head> 上添加了以下视口(viewport)元标记:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

然后在 <header>我页面的元素我指定了 100%(或 100vmin)的 CSS 宽度。我不需要使用 env(safe-area-insets)在我的任何网页上填充,因为它们以特定方式设置样式。

这几乎就是 Apple 在其 official documentation 上描述用于缺口 iPhone 的 iOS Safari Web api 的方式。但它似乎没有工作!

我错过了什么吗?

编辑:我在 iPhone 11 Pro Max 上使用 iOS Safari 13.3.1。

最佳答案

截至 2019 年底,Apple 现在建议使用 @supports(padding:max(0px)) { env() }查询以检测和修复您网站的缺口环境,如下所示:

@supports(padding:max(0px)) {
body, header, footer {
padding-left: min(0vmin, env(safe-area-inset-left));
padding-right: min(0vmin, env(safe-area-inset-right));
}
}

上面的查询和 css 在 here 上进行了详细讨论。 .

关于css - viewport-fit=cover 是否不再适用于 iOS Safari?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60154236/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com