Html 缩小以适应视口元属性有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33767533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does the shrink-to-fit viewport meta attribute do?
提问by 755
回答by davidjb
It is Safari specific, at least at time of writing, being introduced in Safari 9.0. From the "What's new in Safari?" documentation for Safari 9.0:
它是特定于 Safari 的，至少在撰写本文时，已在 Safari 9.0 中引入。来自“Safari 有哪些新功能？” 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">
视口变化
使用视口元标记
"width=device-width"会导致页面缩小以适应溢出视口边界的内容。您可以通过添加"shrink-to-fit=no"到您的元标记来覆盖此行为，如下所示。添加的值将阻止页面缩放以适应视口。
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
In short, adding this to the viewport meta tag restores pre-Safari 9.0 behaviour.
简而言之，将此添加到视口元标记可恢复 Safari 9.0 之前的行为。
Example
例子
Here's a worked visual example which shows the difference upon loading the page in the two configurations.
这是一个有效的视觉示例，它显示了在两种配置中加载页面时的差异。
The red section is the width of the viewport and the blue section is positioned outside the initial viewport (eg left: 100vw). Note how in the first example the page is zoomed to fit when shrink-to-fit=nois omitted (thus showing the out-of-viewport content) and the blue content remains off screen in the latter example.
红色部分是视口的宽度，蓝色部分位于初始视口之外（例如left: 100vw）。请注意，在第一个示例中，页面在shrink-to-fit=no被省略时如何缩放以适应（从而显示视口外的内容），而在后一个示例中，蓝色内容保持在屏幕外。
The code for this example can be found at https://codepen.io/davidjb/pen/ENGqpv.
此示例的代码可以在https://codepen.io/davidjb/pen/ENGqpv找到。
Without shrink-to-fit specified
未指定收缩配合
With shrink-to-fit=no
收缩到适合=否
回答by GGGin
As stats on iOS usage, indicating that iOS 9.0-9.2.x usage is currently at 0.17%. If these numbers are truly indicative of global use of these versions, then it's even more likely to be safe to remove shrink-to-fit from your viewport meta tag.
作为 iOS 使用率的统计数据，表明 iOS 9.0-9.2.x 的使用率目前为 0.17%。如果这些数字确实表明这些版本在全球范围内使用，那么从视口元标记中删除缩小以适应更安全。
After 9.2.x. IOS remove this tag check on its' browser.
9.2.x 之后 IOS 在其浏览器上删除此标签检查。
You can check this page https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html
您可以查看此页面https://www.scotohara.me/blog/2018/12/11/shrink-to-fit.html
