“shrink-to-fit”视口meta属性的作用是什么？

Question

我在寻找这方面的文档时遇到了困难。这是Safari特定的吗？

iOS 9 最近出现了一个 bug (这里)，解决方法是在 viewport meta 中添加 shrink-to-fit=no。

这段代码是做什么的？

- 755

Answer 1

这是特定于Safari的内容，至少在写作时是这样，引入了Safari 9.0。从"Safari有什么新功能?"Safari 9.0文档中可以看到:

视口更改

使用"width=device-width"的视口meta标签会导致页面缩小以适应溢出视口边界的内容。通过像下面示例中添加 "shrink-to-fit=no"来覆盖此行为。添加的值将防止页面缩放以适应视口。

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

简而言之，将此添加到视口meta标记可恢复Safari 9.0之前的行为。

示例

这里有一个视觉示例，展示了在两种配置下加载页面时的差异。

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

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

未指定shrink-to-fit

设置 shrink-to-fit=no

- davidjb

---

抱歉，我仍然不理解那段代码的作用。您能换一种方式解释一下吗？谢谢！ - user5306470

默认情况下，Safari会缩小页面以适应任何超出视口的内容（第一个示例显示蓝色区域可见;这是溢出的内容）。指定“shrink-to-fit=no”可以防止此行为，保持缩放级别不变，并将溢出的内容留在屏幕外。请在您的iDevice上（或iOS模拟器上）尝试Codepen示例并尝试更改设置。也许交互式地看到变化会有所帮助。 - davidjb

啊，我明白了。但是为什么有人希望在较小的屏幕上隐藏部分内容呢？ - user5306470

有各种原因，但是举个例子，滑块/轮播图将内容放在视口之外，或者是大型非响应式内容（例如图片/表格），如果使用默认的“收缩至适合”行为，会导致页面其余部分变得非常小。采用“不收缩至适合”，页面保持预期大小，让内容溢出视口。用户通常仍然可以滚动或缩小以查看溢出的内容，但初始视口与设备大小匹配。 - davidjb

@davidjb 我认为最新的iOS 11已经修复了这个问题。我无法再现这个错误。 - Zeel Shah

这个答案不容易一次理解清楚。应该根据@davidjb的评论，添加使用此方法的示例原因。 - Josh Buchea

Answer 2

根据iOS使用统计数据显示，目前iOS 9.0-9.2.x的使用率只有0.17%。如果这些数字真正反映了这些版本的全球使用情况，那么从你的视口元标记中删除shrink-to-fit更加安全可靠。在iOS 9.2.x之后，苹果移除了其浏览器对该标记的检查。你可以访问https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html页面查看相关内容。

- GGGin

Answer 3

这是一个标签，可以帮助您的页面不缩小以适应浏览器的默认设置，如果将其设置为"no"，则浏览器将按照您的设置覆盖默认流程，即不缩小以适应。

我希望这可以解释清楚，如果不能，请在标签或用您喜欢的编辑器中使用Emmet复制代码，然后刷新和加载浏览器并更改分辨率，您就会明白。

- Kushal Pokhrel