很长一段时间,标准视窗meta标签是这样的-
<meta name="viewport" content="width=device-width, initial-scale=1">
然而,由于去年9月推出iOS Safari 9.0,现在需要一个新的附加价值对于大多数响应网站,这元标签——的新标准
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
为什么我们需要添加这个新的值?
要理解为什么我们需要包含这个新值,我们需要观察会发生什么,如果我们不包括它。
如今,大多数元素风格与响应性维度。这意味着使用自适应单位百分比和窗口单位,而不是简单的像素。然而,有来的情况下,包括一个固定宽度元素。不一定,元素的宽度小于浏览器窗口的宽度。例如,一个800像素,div在iPhone上。
通常,我们所期望的行为,将会有一个溢出,和一个滚动条将被引入,以允许用户查看内容的宽度。然而,当Safari在新的分割视图模式(即当有多个应用程序打开并排在屏幕上),这不会发生。
取而代之的是,Safari操纵视窗的宽度等于满溢的元素,例如800 px,所以它是完全适合在屏幕上。的影响是页面的其余部分是“缩小以适应更大的元素。
我们还可以看到,当固定宽度元素不大于视窗,一切都是正常的。
为什么Safari如此行事呢?
根据开发者WebKit,这样做的原因是,因为根据他们的数据,大部分的网站滥用元viewport标记。
@KMuncie这是故意的。只有少数的网站使用“初始= 1”或“宽度=设备宽度”正确这是补充道:(
——本杰明(@awfulben)也不会2015年9月22日
而不是使用标准的价值 width=device-width, initial-scale=1他们要么硬编码窗口大小或失踪。因此,由于引入拆分视图,很多网站没有准备实施的响应能力和打破。
添加 shrink-to-fit
苹果对这个问题的反应是,默认情况下,缩小页面上所有的内容,以适应浏览器窗口的宽度。网站的负责任的回应,我们可以添加新的视窗元值, shrink-to-fit=no信号这个Safari和禁用这个默认功能。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
