第一次接触-什么是meta viewport。

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"