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设置移动端自适应