viewport-fit=cover 是否不再适用于 iOS Safari？答案

【问题标题】：Is viewport-fit=cover no longer working on the iOS Safari?viewport-fit=cover 是否不再适用于 iOS Safari？
【发布时间】：2022-01-19 02:46:24
【问题描述】：

我希望在 iOS Safari 上使用 100% 的屏幕宽度作为我的网站标题在 notched iOS/Android device 上，为了实现这一点，我在我的页面 <head></head> 上添加了以下视口 meta_tag：

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

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

这几乎就是 Apple 在其official documentation 上为缺口 iPhone 描述 iOS Safari 网络 API 的方式，但它似乎不起作用！

我错过了什么吗？

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

【问题讨论】：

标签： css ios mobile-safari

【解决方案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 上进行了详细讨论。

【讨论】：

【解决方案2】：

我创建了一种解决方法，它不依赖于一个适合视口的封面。我在一个 three.js 项目中需要这个。

简单来说，我将网页扩展到 iPhone 缺口之外的方法是放大页面，然后滚动到中间。

你可以在我的 github https://github.com/anthonypena97/chromeios-viewportfitcover阅读完整的细节和源代码

【讨论】：