ChatGPT解决这个技术问题 Extra ChatGPT

缩小以适应视口元属性有什么作用?

我很难找到这方面的文档。它是特定于 Safari 的吗?

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

这段代码有什么作用?


C
Community

至少在撰写本文时,它是 Safari 特定的,在 Safari 9.0 中被引入。来自“Safari 有什么新功能?” documentation for Safari 9.0

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

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

例子

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

红色部分是视口的宽度,蓝色部分位于初始视口之外(例如 left: 100vw)。请注意,在第一个示例中,当省略 shrink-to-fit=no 时页面如何缩放以适应(从而显示视口外的内容)并且在后一个示例中蓝色内容保持在屏幕外。

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

未指定收缩适配

https://i.stack.imgur.com/mSP03.png

有收缩适应=否

https://i.stack.imgur.com/a3PrY.png


很抱歉,但我仍然不明白该代码的作用。可以换一种方式解释吗?谢谢!
@Dani默认情况下,Safari会缩小页面以适应任何溢出视口的内容(第一个示例显示蓝色区域可见;这是溢出的)。指定 shrink-to-fit=no 可防止这种行为,只保留缩放级别并将溢出的内容留在屏幕外。在您的 iDevice(或 iOS 模拟器)上尝试 Codepen 示例并尝试更改设置。也许以交互方式查看变化会有所帮助。
啊,我明白了。但是为什么有人希望他们的部分内容隐藏在较小的屏幕上呢?
@Dani 各种原因,但快速示例是将内容放置在视口之外的滑块/轮播,或者其他大型非响应内容(例如图像/表格),否则会溢出并导致页面的其余部分在默认情况下变得很小shrink-to-fit 行为。使用 shrink-to-fit=no,页面保持预期大小,让内容溢出视口。用户(通常)仍然可以滚动或缩小以查看溢出内容,但初始视口与设备大小匹配。
@davidjb 我认为最新的 iOS 11 已修复此问题。我无法重现此错误。
G
GGGin

作为 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


P
Pierre.Vriens

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

我希望这可以澄清,如果不尝试复制您的 head 标签中的代码或使用您喜欢的编辑器进行修改,然后刷新并加载浏览器并更改您将弄清楚的分辨率。