缩小到适合的视口元属性有什么作用？

Question

我找不到这方面的文档。它是Safari专用的吗？

iOS 9中最近出现了一个错误（here），其解决方案是将shrink-to-fit=no添加到viewport meta。

这段代码有什么作用？

Answer 1

至少在撰写本文时，它是Safari特有的，在Safari 9.0中引入。来自“Safari中有什么新东西？” documentation for Safari 9.0：

Viewport Changes

使用"width=device-width"的视口元标记会导致页面缩小以适应溢出视口边界的内容。您可以通过将"shrink-to-fit=no"添加到元标记来覆盖此行为，如下所示。添加的值将阻止页面缩放以适合视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

简而言之，将其添加到视口元标记会恢复Safari 9.0之前的行为。

Example

这是一个工作的可视化示例，显示了在两种配置中加载页面时的差异。

红色部分是视口的宽度，蓝色部分位于初始视口之外（例如left: 100vw）。请注意，在第一个示例中，当省略shrink-to-fit=no时，页面被缩放为适合（因此显示了视口外的内容），并且在后一个示例中，蓝色内容保持在屏幕外。

可以在https://codepen.io/davidjb/pen/ENGqpv找到此示例的代码。

没有缩小指定

随着收缩到适合=没有

Answer 2

作为iOS使用情况的统计数据，表明iOS 9.0-9.2.x的使用率目前为0.17％。如果这些数字真的表明这些版本的全球使用，那么从视口元标记中删除缩小比例更安全。

9.2.x之后IOS在其浏览器上删除此标记检查。

你可以查看这个页面https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html