meta viewport移动端自适应

当我们对移动端进行页面适配时,我们首先应该了解到meta viewport,media query,以及动态rem。

什么是Viewport?

手机浏览器会把页面放入到一个虚拟的“视口”(viewpoint)中,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域大,也可能比浏览器的可视区域小。通常这个虚拟的“视口”(viewport)比屏幕宽,会把网页挤到一个很小的窗口。
如果不显示地设置viewport,那么浏览器就会把width默认设置为980。但后果是浏览器出现横向滚动条,因为浏览器可视区域的宽度比默认的viewport的宽度小。
然后浏览器引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

meta viewport 的6个属性:

  • width : 设置viewport 的宽度,默认视口宽度
  • height: 设置viewport 的高度
  • initial-scale : 设置页面的初始缩放值
  • minimum-scale :允许用户的最小缩放值
  • maximum-scale:允许用户的最大缩放值
  • user-scalable: 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
特殊说明:(IE6,7,8)支持,需要使用css3mediaqueries.js
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->

3个viewport:

(1)layout viewport

如果把移动设备上浏览器的可视区域设为viewport的话,某些网站会因为viewport太窄而显示错乱,所以这些浏览器就默认会把viewport设为一个较宽的值,比如980px,使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。

(2)visual viewport

layout viewport的宽度是大于浏览器可视区域的宽度的,所以还需要一个viewport来代表浏览器可视区域的大小,这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。

(3)ideal viewport

ideal viewport是一个能完美适配移动设备的viewport。首先,不需要缩放和横向滚动条就能正常查看网站的所有内容;其次,显示的文字、图片大小合适,如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清,无论是在何种密度屏幕,何种分辨率下,显示出来的大小都差不多。这个viewport叫做 ideal viewport。

ideal viewport并没有一个固定的尺寸,不同的设备有不同的ideal viewport。例如,所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640。

ideal viewport 的意义在于,无论在何种分辨率的屏幕下,针对ideal viewport 而设计的网站,不需要缩放和横向滚动条都可以完美地呈现给用户。

参考资料:浅谈meta viewport设置移动端自适应