缩小以适应视口元属性有啥作用？

Posted 2023-02-22

【中文标题】缩小以适应视口元属性有啥作用？

【英文标题】：What does the shrink-to-fit viewport meta attribute do?缩小以适应视口元属性有什么作用？

【发布时间】：2016-02-19 10:47:06

【问题描述】：

我找不到这方面的文档。是 Safari 特有的吗？

ios 9 (here) 最近出现了一个错误，解决方案是将shrink-to-fit=no 添加到视口元数据中。

这段代码有什么作用？

【参考方案1】：

这是一个可以帮助您的页面不缩小以适应的标签，如果将其设置为“no”，则由浏览器默认设置完成，如下所示：<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=*no*"> 然后它将覆盖浏览器的默认过程以遵循你的，即不要缩小以适应。

我希望这可以澄清，如果不尝试复制您的 head 标签中的代码或使用您喜欢的编辑器，刷新并加载浏览器并更改您会发现的分辨率。

【参考方案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

【参考方案3】：

至少在撰写本文时，它是 Safari 特定的，在 Safari 9.0 中引入。来自“Safari 有什么新功能？” 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找到。

未指定收缩以适应

收缩适应=否

【讨论】：

对不起，我还是不明白这段代码的作用。可以换一种方式解释吗？谢谢！

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

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

@Dani 各种原因，但简单的例子是将内容放置在视口之外的滑块/轮播，或者其他会溢出并导致其余内容的大型非响应内容（例如图像/表格）使用默认的shrink-to-fit 行为使页面变小。使用shrink-to-fit=no，页面保持在预期大小，让内容溢出视口。用户（通常）仍然可以滚动或缩小以查看溢出内容，但初始视口与设备大小匹配。

@davidjb 我认为最新的 iOS 11 已修复此问题。我无法重现此错误。