dav*_*djb 168
至少在撰写本文时,它是Safari特有的,在Safari 9.0中引入.来自"Safari中有什么新东西？" 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各种原因,但快速示例是将内容放置在视口之外的滑块/轮播,或其他大的无响应内容(例如图像/表格)否则会溢出并导致页面的其余部分变得很小"收缩到适合"的行为.使用`shrink-to-fit = no`,页面保持预期大小,让内容溢出视口.用户可以(通常)仍然滚动或缩小以查看溢出内容,但初始视口与设备大小匹配. (5认同)
- @Dani默认情况下,Safari会缩小页面以适应溢出视口的任何内容(第一个示例显示蓝色区域可见;这是溢出的).指定`shrink-to-fit = no`会阻止此行为,仅保留缩放级别并将溢出内容保留在屏幕外.在iDevice(或iOS模拟器)上尝试Codepen示例并尝试更改设置.也许以交互方式看待变化会有所帮助. (3认同)
- 很抱歉，但是我仍然不明白该代码的作用。您可以用其他方式解释吗？谢谢！ (2认同)
- 啊我明白了。但是为什么有人希望他们的部分内容隐藏在较小的屏幕上？ (2认同)
- @davidjb我认为这是用最新的iOS 11修复的.我无法重现这个bug. (2认同)
小智 9
作为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