viewport 是用户网页的可视区域，是设备的屏幕中能用来显示网页的那块区域，再进一步讲的话，它就是浏览器中用于显示网页的屏幕区域。大部分移动设备中的浏览器会把viewport默认设置为980px或1024px，显然这个尺寸比它的浏览器的可视区域会更大，因此，我们用移动设备打开一个网站就会出现水平滚动条用于显示整个页面。
通过查阅资料，发现移动设备中包含了三种不同概念的viewport：
1.Layout viewport:
布局视口，是移动设备默认的viewport。由于移动设备的屏幕尺寸比较小，如果把浏览器可视区域作为viewport的话，很多网页就会因为viewport宽度不足而显示错乱，所以一般移动设备都会将布局视口默认设置为980px或以上，以此来保证网页显示的正常性，用户可以通过缩放、滚动条等操作浏览整个页面。可以通过js获取：document.documentElement.clientWidth；
2.Visual viewport
视觉视口，他代表的是浏览器中可视部分的区域，也就是移动设备物理屏幕的可视区域，如果用户放大浏览器，这个尺寸就会变小，可以通过window.innerWidth获取
3.Ideal viewport
理想视口，也就是屏幕分辨率，是物理像素（物理像素表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高的密度来显示图像），它的屏幕尺寸是不会改变的，可以通过screen.width获取。理想视口可以完美适配移动端页面，使得用户不需要缩放或利用滚动条就可以清晰地看到整个网页，网页的布局、图片、字体都能合理显示而不受分辨率的影响。
设置viewport：通过meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta标签里有很多属性：
1.width：对应viewport的宽度，可以设置成某个值，但通常情况下，我们会把width设置为device-width即设备的宽度，这样就可以把viewport宽度设置为ideal viewport的宽度了
<meta name=”viewport” content=”width=device-width”/>
2.height: 类似于width,可指定高度为device-height即设备高度，但通常设的不多
<meta name=”viewport” content=”height=device-height”/>
3.initial-scale : 初始缩放比例，数值型，也可以为小数
<meta name=”viewport” content=”initial-scale=1.0”/>
4.maximum-scale： 允许用户缩放的最大比例，取值范围【0.0,10.0】，可为小数
<meta name=”viewport” content=”maximum-scale=2.0”/>
5.minimum-scale: 允许用户缩放的最小比例，取值范围【0.0,10.0】，可为小数,不过通常情况下不会定义该属性，实用性不大
<meta name=”viewport” content=”minimum-scale=0.5”/>
6.user-scalable:用户是否可以手动缩放，yes/no，默认是yes
< meta name="viewport" content=”user-scalable=no”/>
另有两个特殊属性:
1.miniual-ui: safari（ios7+）浏览器新增属性，作用是隐藏浏览器顶部地址栏及底部导航栏。
<meta name="viewport" content="minimal-ui">
2.target-densitydpi: android 4.0以下设备并不支持viewport的width属性，但可以通过设置target-densitydpi来代替，此属性不兼容ios，并且android也已决定弃用，一般情况下就不会使用到它了。
