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

Question

我无法为此找到文档。它是Safari专用的吗？

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

这段代码有什么作用？

Answer 1

至少在撰写本文时，它是Safari特有的，在Safari 9.0中引入。来自Safari中的新功能？＆＃34; documentation for Safari 9.0：

  

视口更改

     

使用"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之前的行为。

实施例

这是一个有效的视觉示例，显示了在两种配置中加载页面时的差异。

红色部分是视口的宽度，蓝色部分位于初始视口之外（例如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