viewport是浏览器展示网页的可视区域。有三种视口。
第一种是layout viewport他是浏览器的默认布局（默认宽度为980px）。可以通过document.documentElement.clientWidth来获取。
第二种是visual viewport，layout viewport的宽度会大于浏览器的可视区域的宽度。所以我们为移动设备浏览器可视区域设定了viewport。可以通过document.documentElement.innerWidth来获取可视区域的宽度。
第三种是ideal viewport，它是网页的最完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。
移动设备默认的viewport是layout viewport，，但在进行移动设备网站的开发时，需要的是ideal viewport。要得到ideal viewport，需要用到meta标签。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"
让viewport的宽度等于当前设备的宽度。
meta viewport的六个属性：
width ： 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
height: 设置layout viewport的高度，不常用。
initial-scale:初始缩放值。
maximum:最大缩放值
minimum:最小缩放值
use-scalable:是否允许用户进行缩放，值为"no"或"yes"
