缩放到适合的视口元属性有什么作用?

我很难find这个文件。 它是特定于Safari吗?

在iOS 9( 这里 )有一个最近的错误,解决scheme是添加shrink-to-fit=no的视口元。

这段代码是做什么的?

至less在编写本文时,Safari是特定的,在Safari 9.0中引入。 从“Safari中有什么新东西?” Safari 9.0的文档 :

视口更改

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

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

这里有一个工作的视觉例子,显示了在两种configuration中加载页面的不同之处。

红色部分是视口的宽度,蓝色部分位于初始视口之外(例如left: 100vw )。 请注意,在第一个示例中,如果省略了shrink-to-fit=no (因此显示视口外的内容),并且在后面的示例中蓝色内容保持不在屏幕上,则该页面会放大以适合放大。

这个例子的代码可以在https://codepen.io/davidjb/pen/ENGqpvfind。;

没有缩小到合适的指定

没有缩小到适合=没有

缩小到适合=没有

缩小到适合=没有