收缩以适合视口元属性有什么作用?

What does the shrink-to-fit viewport meta attribute do?

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

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

这段代码有什么作用?

它是特定于 Safari 的,至少在撰写本文时是这样,在 Safari 9.0 中引入。从“Safari 有什么新功能?” documentation for Safari 9.0:

Viewport Changes

Viewport meta tags using "width=device-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.

<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.

中找到

未指定收缩至适合

有收缩贴合=无

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

这是一个可以帮助您的页面不缩小以适应的标签,这是由浏览器的默认设置完成的,如果它被设置为“否”,就像这样:<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=*no*"> 那么它将超越浏览器遵循您的默认流程,即不要缩小以适合。

我希望这能说明问题,如果不尝试复制您的 head 标记中的代码或使用您喜欢的编辑器进行 emmet 并刷新并加载浏览器并更改分辨率,您就会明白。