参考：CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport（写的超级详细）
CSS像素、逻辑像素、物理像素、设备像素比、PPI、viewport
1.CSS像素（虚拟像素）
概念：CSS和JS使用的抽象单位，浏览器的CSS和JS都是以CSS像素为单位的，CSS像素的单位是px，具有相对性。
2.物理像素（DP、设备像素）
概念：如显示屏是由一个个物理像素点组成的，每个设备的物理像素点固定不变。单位是pt。1pt=1/72(inch)，1inch=2.54cm。
3.逻辑像素（DIP、设备独立像素、密度无关像素）
概念：可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（比如CSS像素），然后由相关系统转换为物理像素。PC端就没有设备独立像素的概念。
可以认为逻辑像素=CSS像素
4.设备像素比（DPR）
dpr= 物理像素/逻辑像素(未缩放状态下，物理像素和CSS像素的初始比例关系)
当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
部分浏览器的window对象有个devicePixelRatio属性（存在兼容性问题），devicePixelRatio=dpr
5.PPI
每英寸多少像素值，即像素密度单位物理面积内拥有像素值的情况。
iphone6 plus:
var 斜边尺寸 = var ppi = 斜边尺寸/5.5 ppi = 401ppi
ppi越高，图像越清晰。
通过ppi划分是否高清屏，再去对应相应的dpr。
DPI：每英寸多少点（显示屏时，dpi=ppi）
我们关心的是ppi
Retina显示屏：PPI>300
具体意义
因为不同的设备的物理像素大小不同，所以浏览器需要对css中的像素进行调节，使得浏览器中1css像素的大小在不同的物理设备上看上去差不多。
CSS的相对性：如果dpr=1时是正常大小，当进行放大操作之后，原来1个逻辑像素对应1个物理像素，现在是1个逻辑像素对应2个物理像素。在高PPI的设备上，CSS像素在默认状态下相当于多个物理像素的尺寸，也就越高清。
其他
不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点，也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。
注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
6.viewport
1.三种viewport
①layout viewport 布局视窗
网站的宽度，可以通过document.documentElement.clientWidth获取，通过viewport meta标签设置
②visual viewport——视觉视窗
代表浏览器可视区域的大小，可以通过 document.documentElement.innerWidth或者window.innerWidth来获取
③ideal viewport——理想视窗
跟移动设备相关的viewport，移动设备的宽度。不需要用户缩放和横向滚动条就能查看网站的所有内容。ideal viewport没有固定的尺寸，不同的设备有不同的ideal viewport。
所有的iPhone的ideal viewport值都是320，无论屏幕宽度是320还是640，在css中320px就代表iphone屏幕的宽度。安卓不固定。
2.meta进行控制
移动设备默认的viewport是layout viewport，但是进行开发是我们需要ideal viewport。
把当前的viewport宽度设置为ideal viewport的宽度：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
①六个属性
- width：设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
- initial-scale：设置页面的初始缩放值，为数字，可带小数
- minimum-scale： 允许用户的最小缩放值，为数字，可带小数
- maximum-scale：允许用户的最大缩放值，为数字，可带小数
- height 设置layout viewport 的高度
- user-scalable 是否允许用户进行缩放，值为”no”或”yes”(0/1)
3.具体操作
<meta name="viewport" content="initial-scale=1">
//windows phone上的IE无论横屏还是竖屏都是把宽度设为竖屏时ideal viewport的宽度
<meta name="viewport" content="width=device-width">
//ipad和iphone无论横屏还是竖屏，宽度都是竖屏时ideal viewport的宽度
上面两句是一样的效果，所以说明缩放是相对于ideal viewport来进行缩放的。所以一般都写上去，就可以解决IE/iphone/ipad的毛病。
如果width和initial-scale=1同时出现并且起冲突，取较大的为准。
4.scale
-
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
-
当前缩放值（scale）=ideal viewport宽度/visual viewport宽度
initial-scale默认值：
- Iphone,ipad：320/layout viewport（即保证不会出现横向滚动条）
- 安卓：无法
大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是1。
