viewport深入理解

参考：http://www.cnblogs.com/2050/p/3877280.html
概念：devicePixelRatio＝dpr：物理像素 / 独立像素
独立像素是指设备css中的px大小，也就是逻辑像素（dpr在不同的浏览器中有兼容问题）

PPK大神关于三个viewport的理论
1.就分辨率来说，手机的分辨率和电脑比较接近。
2.把pc浏览器的网页展现在手机中时面临了几种策略选择：
按分辨率原样展示在手机viewport中（这样手机上显示的内容会很小看不清，同时由于手机分辨率的不同，适配性会很差）
按逻辑像素展现，逻辑像素也会大于物理像素，逻辑像素宽度不够，会出现错乱
为了展现网页内容，手动设定一个viewport为较宽的值，大部分浏览器设定为980px，这种情况下就会正常显示（这个值也称layout viewport，可以通过document.documentElement.clientWidth获取）这个layout viewport是会大于浏览器可视宽度的，所以如果是普通没有做手机端适配的网站，是会出现部分显示，其余部分需要拖动查看的情况。这样做的好处在于坚固了适配性与可读性，但是内容会变小。

手机浏览器在不缩放也就是理想状况下

最最基本的:dpr与分辨率(其他都是在这两个的基础上，根据initial-scale或者设置width来改变)
逻辑像素 ＝ 物理像素＊dpr＊initial-scale
ideal viewport ＝ 手机分辨率／dpr
layout viewport＝ visual vieport＝ 手机分辨率／逻辑像素
然而，因为现有网页多为pc，为了让手机访问这些网页表现更加良好，我们对网页进行了缩放：initial-scale ＝＝ 0.x（大部分浏览器默认是0.33作用）
导致逻辑像素变小，网页视窗变大，layout viewport与visual vieport变大。