2

您好,我想知道 Safari 的 viewport-fit=cover 是否有解决方法或等效方法,可以将网站扩展到 iPhone 缺口之外,但适用于 Chrome。

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

我已阅读并尝试过的所有内容似乎都确认包括 viewport-fit=cover 在 Chrome iOS 上不起作用。

这是我找到的资源页面:https ://webkit.org/blog/7929/designing-websites-for-iphone-x/

我正在制作一个网页,其中包含一个用于 3D 模型的three.js 渲染的单个画布,并且希望整个场景覆盖该页面。

4

1 回答 1

0

更新 - 我想出了一个可以使用的解决方法。

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

您可以在https://github.com/anthonypena97/chromeios-viewportfitcover看到我的完整解决方案

我是在 three.js 环境中编写的,但是您可以通过对我的代码的一些研究得出您的解决方案

于 2022-01-18T18:33:01.927 回答