pc端：
pc端中viewport即为浏览器窗口的宽度。
viewport的功能在于控制网站的最高块状（block）容器：<html>元素。 未设置<html>宽度的情况下，<html>的宽度即为viewport的宽度。
获取viewport的尺寸：
window.innerWidth/Height包含滚动条
document. documentElement. clientWidth/Height不包含滚动条
获取<html>的尺寸：
document.documentElement.offsetWidth/Height
移动端重点：移动端的三种viewport——虚拟viewport——layoutviewport、实际布局viewport——visualviewport以及移动设备适配viewport——idealviewport
抽象：layoutviewport是一张大的不能改变大小和角度的图片。而我们通过一个框visualviewport来观察这张图片。
我们可以通过拿着这个框站得离大图片远点（用户的缩小页面功能），以一次性看到这个大图片。
或者你能站得近点（用户的放大页面功能）以看到一部分，而看到的这部分就是visualviewport的区域——当前显示在屏幕上的内容。
<html>的宽度继承与layoutviewport，iPhone上的Safari使用980px、Opera 850px，安卓的Webkit核心800px，IE974px
用户可以滚动页面来改变可见部分，或者缩放浏览器来改变visualviewport的尺寸，也就是改变我们能看到的内容大小
document.documentElement.clientWidth/Height计算layoutviewport的尺寸
window.innerWidth/Height计算visualviewport的尺寸
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">的解析:
假设你创建一个页面，并不为它赋值width。那么它会伸展开来占据100%的viewlayout的宽度
（默认：iPhone上的Safari使用980px、Opera 850px，安卓的Webkit核心800px，IE974px）。
绝大多数浏览器缩小这个页面以在一屏的宽度上显示这个layoutviewport。以致手机屏幕上显示的内容极小。
这时就可以通过该标签将<html>的宽度设置为合适的大小,这个宽度就是idealviewport的宽度。
分析：
width=device-width：设备的屏幕宽度
user-scalable=no：不允许用户手动缩放
minimum-scale:允许用户的最小缩放值，为一个数字
maximum-scale:允许用户的最大缩放值，为一个数字
initial-scale:设置页面的初始缩放值，为一个数字
显而易见：ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度sssssss。
参考自：
http://www.w3cplus.com/css/viewports.html © w3cplus.com
http://www.cnblogs.com/2050/p/3877280.html
像素的奥义
物理像素(pp)
物理像素又称为设备像素，是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度
设备独立像素(dip)
又称密度无关像素，可以看做是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
css像素(dips)
一个抽象单位，主要使用在浏览器中，用来精确度量web页面上的内容。一般情况下，css像素称为与设备无关的像素，简称dips
屏幕密度(ppi)
是指一个设备表面上存在的像素数量，以每英寸有多少像素来计算(ppi)
设备像素比(dpr)
定义了物理像素和设备独立像素的对应关系，公式：
设备像素比 ＝ 物理像素 / 设备独立像素
对于设备像素比的解释
在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina（设备像素dpr比为2）屏幕下，1个CSS像素对应的却是4个物理像素。