介绍viewport的概念之前再看一个例子，我们在手机浏览器中打开一个PC网站时我们发现可以看到网页的全貌，而并非出现了滚动条：
如上图，左边是chrome的手机调试工具，右边的是Nexus 4的安卓模拟器，之所以能看到1000多像素宽的PC网页的全貌是因为viewport的存在，手机浏览器将PC页面渲染在一个比较大的viewport里面（android4.x普遍为980px，ios也为980px），然后再进行缩放，就能看到整个页面的全貌了。所以明确一下手机浏览器的工作分为两步：
将页面渲染在一个比较大的viewport里面并进行缩放（这个viewport也叫layout viewport），保证页面排版以及css布局不会乱。
通过大小等于手机浏览器可视区域的viewport（这个viewport也叫visual viewport）选取可视区域进行展示。
OK，接下来就具体介绍一下viewport的分类，viewport分为layout viewport和visual viewport，layout viewport可以理解为一个大的窗体，处在底层，包含整个PC浏览器页面，如下图所示：
layout viewport的值可以通过以下js代码来获取：
document.documentElement.clientWidth而visual viewport则代表手机浏览器当前可视区域的窗体，处在上层，如下图所示：
visual viewport的值可以通过以下js代码来获取：
window.innerWidth接下来就分别看一下Nexus 4下的layout viewport和visual viewport的值：
如上图所示，都是980px，至此就可以解释最开始的那个问题——1280*768px的div为什么不能在Nexus 4上全屏显示。答案很简单，默认的layout viewport的值是980px，而这个图片的宽度是768px，所以无法铺满屏幕。然而在实际开发中我们并不会用默认的980px的viewport，原因很简单，上面显示pc页面的效果虽然没有滚动条可以看到页面的全貌，但是可以发现缩放的太小了以至于有些看不清，这样明显是不合适的，所以在实际开发中我们都会自定义layout viewport的值从而得到合适的缩放效果，那么该如何自定义layout viewport的值？很简单，都过设置Meta标签就可以完成。
下面就介绍一下如何通过Meta标签来设置layout viewport的值，Meta viewport有以下6个属性值：
Content属性valuewidth 设置layout viewport 的宽度，可以是固定值或“width-device”
initial-scale 设置页面的初始缩放值
minimum-scale 允许用户的最小缩放值
maximum-scale 允许用户的最大缩放值
user-scalable 是否允许用户进行缩放，值为“no”或“yes”
再看一下Meta标签的格式：
<meta name="viewport" content="width=device-width">如上所述，设置width的值为device-width（即设备宽度）就表示将layout viewport的值设置为设备宽度，比如Nexus 4就是384px，加上这个Meta标签后我们再看看上面Yellow的效果，看之前首先要理清，div的宽度依旧是1280*768px，而我们chrome手机调试工具选择的设备是Nexus 4，也就是说此时的layout viewport的值是384px，在html源文件中添加<meta content="width=device-width"> 后再看看渲染的效果：
如上图所示，layout viewport的值变成了384px，和Nexus 4的设备宽度保持一致，而visual viewport的值变成了776px，因为我们页面的div给的是768px，所以为了容纳下这个div我们的visual viewport的值就为776px，如标尺上的一致，注意第三行js：
window.innerWidth/document.documentElement.clientWidth