前言
对于移动webapp开发人员来说，viewport是个很重要的东西，容易用但很多时候都是不明白的，于是我决心去弄清楚它。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
viewport涉及的单位
分辨率：指设备显示器所能显示的像素有多少
物理分辨率：指设备显示器所能显示最高的像素数
DPI （Dots Per Inch）：每英寸的点数密度
PPI（Pixels Per Inch）：每英寸的像素点
DIP/DP（device independent pixels）: 设备独立像素, 这个由设备硬件决定。
devicePixelRatio ： 设备像素比 （ window.devicePixelRatio = 物理分辨率 / dip ）
PS：在计算机或移动屏幕中提到ppi和dpi其实都一样， 越高的PPI所呈现的内容越清晰。
什么是viewport？
其实手机浏览器装载页面是放在一个中间件里面的，而这个中间件就是viewport。（起初是ios提出的，后来android借用了）
viewport重要概念
1.可视区（visual area） : 就是我们设备上能看到页面的区域 （这个长度不是固定的）。
2.设备宽度（device-width） : 这个就是DIP的值，即是设备独立像素，由设备硬件本身决定（iPhone4S 是 320， iPhone6 plus 是 414， 魅蓝 是 432 ）
PS：device-width一般值范围是320—432
viewport属性
width：viewport 的宽度
height：viewport的高度 （很少使用）
initial-scale：设置页面的初始缩放值
minimum-scale：允许用户的最小缩放值
maximum-scale：允许用户的最大缩放值
user-scalable：是否允许用户进行缩放
target-densitydpi（android才生效）：设备的密度等级
PS：讲上面所有属性是没有必要的，我理出最重要的三个属性来说明，即可理解viewport
viewport重要属性
三个重要属性是分别是width、initial-scale、target-densitydpi（这个属性放后面讲）
width与initial-scale组合设置，有四种不同的情况（android上设initial-scale无效的，这个后面讲，先讲ios上的情况），iPhone4S（它的设备宽度是320）上测试：
1.设width（固定值），不设initial-scale
ios浏览器会为了调整页面能够满屏显示，会自动计算缩放比，即initial-scale
例如：设置width=640
viewport width = 640px
缩放比 = 320 / 640 = 0.5
可视区宽度 = 设备宽度 / 缩放比 = 320 / 0.5 = 640px
PS：上面这条可视区宽度的计算公式是我测试得出的， 不过回过头看某些介绍viewport文章， 他们也有介绍。
2.设width（固定值），设initial-scale = 1.0
例如：设置width=640
viewport width = 640px
缩放比 = 1.0
可视区宽度 = 设备宽度 / 缩放比 = 320 / 1.0 = 320px
PS：所以如果这样设置，就会出现页面只显示了一半的情况。
3.设width为device-width， 不设initial-scale
没有设initial-scale情况下，initial-scale一直是1.0
例如：设置width=device-width
viewport width = 320px （iPhone4s设备宽度）
缩放比 = 1.0
可视区宽度 = 设备宽度 / 缩放比 = 320 / 1.0 = 320px
4.设width为device-width， 设initial-scale = 0.5
例如：设置width=device-width
viewport width = 320px （iPhone4s设备宽度）
缩放比 = 0.5
可视区宽度 = 设备宽度 / 缩放比 = 320 / 0.5 = 640px
PS：这个时候显示的页面是640px宽
说到这里，大家应该对各种设置viewport的方式有一定的了解。
viewport之android
这里之所以把android单独拿出来，就是target-densitydpi（以后的android版本会废弃）这个属性的问题。
对于android来讲，initial-scale在大部分机型上无效的，无论是0.5或2都不会变化，但这不影响我们使用viewport。
target-densitydpi这个属性设置设备使用什么dpi显示，其实在我的理解来说，其实就是充当缩放的功能。
target-densitydpi取值：可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。
一些特殊取值：
low-dpi : 120
medium-dpi : 160
high-dpi : 240
xhdpi : 320
xxhdpi : 400
PS：不设置的情况下，默认选择的是 medium-dpi（但有些机型默认不是这个，像小米1默认就是high-dpi）
设置target-densitydpi这些值会导致怎么样的缩放呢？
缩放的比是与 medium-dpi的比：
120 -> 120/160 = 0.75
160 -> 160/160 = 1 (华为荣耀xx device-dpi)
240 -> 240/160 = 1.5 (小米1 device-dpi)
320 -> 320/160 = 2 (联想乐檬 device-dpi)
400 -> 400/160 = 2.5 (魅蓝 device-dpi)
PS：后面括号里是我测试的机型它们各自的device-dpi
例如：
1.当你设target-densitydpi = 240时：
华为荣耀xx可视区宽度 = 设备宽度 * dpi比值 = 360 * 1.5 = 540
小米1可视区宽度 = 设备宽度 * dpi比值 = 320 * 1.5 = 480
联想乐檬可视区宽度 = 设备宽度 * dpi比值 = 360 * 1.5 = 540
魅蓝可视区宽度 = 设备宽度 * dpi比值 = 432 * 1.5 = 648
2. 当你设target-densitydpi = device-dpi时：
华为荣耀xx可视区宽度 = 设备宽度 * dpi比值 = 360 * (160/160) = 360
小米1可视区宽度 = 设备宽度 * dpi比值 = 320 * (240/160) = 480
联想乐檬可视区宽度 = 设备宽度 * dpi比值 = 360 * (320/160)= 720
魅蓝可视区宽度 = 设备宽度 * dpi比值 = 432 * (400/160) = 1080
PS：根据上面的结论，我强烈建议不要使用 target-densitydpi = device-dpi， 因为不同设备上最终的可视区的宽度差异很大，除非你的app有为之做处理（rem、em的相对单位写法）。
viewport的东西也大体讲到这里！
注意：
1.何时viewport width设置固定值？
当你的页面为某个固定宽度，或者里面的元素长宽和字体大小在某种宽度显示才看起来正常时候。
2.固定viewport width的注意事项
当设备横竖屏切换时候，就需要切换viewport的width值，而且手机和平板的viewport width也是不同的。
3.viewport的width多大多小？
当width小于设备宽度时候按设备宽度计算，而能设多大这个想法并没什么意义。
总结：
其实说了那么多，其实就回到开头那句代码，而最终建议设的viewport也是那一句，也希望我的想法大家能理解，如果有错误地方请指正。
附上ios对viewport的讲解：Configuring the Viewport
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文转自 海角在眼前 博客园博客，原文链接： http://www.cnblogs.com/lovesong/p/4355029.html ，如需转载请自行联系原作者
