最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

iOS Safari和shrink-to-fit的问题

CSS&HTML AZ 1818浏览 0评论

很长一段时间,标准视窗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,所以它是完全适合在屏幕上。的影响是页面的其余部分是“缩小以适应更大的元素。

not-1

我们还可以看到,当固定宽度元素不大于视窗,一切都是正常的。

not-2-1

为什么Safari如此行事呢?

根据开发者WebKit,这样做的原因是,因为根据他们的数据,大部分的网站滥用元viewport标记。

而不是使用标准的价值 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">  

yes-2-1

 

转载请注明:TUTERM.COM » iOS Safari和shrink-to-fit的问题

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!