设备像素、设备独立像素

设备像素：物理像素，比如手机大小4.7英寸，可以看成显示器上一个一个的点。
css像素：web编程中的逻辑单位，属于设备独立像素
设备独立像素 DIPs：独立与设备的用于逻辑上衡量像素的单位（与设备无关的逻辑像素），真正显示的时候会被转换成物理像素。

设备像素与设备独立像素的关系：
PPI：每英寸像素数（物理像素），像素密度。
PPI =（w^2+h2）开平方根 / 屏幕尺寸 PPI越高画质越细腻。
标准PPI=160：一个像素对应一个光点。

设备像素比DPI：window.devicePixelRatio
设备像素比 = 设备像素 / 设备独立像素。
不同手机下同一页面显示差异，就是因为设备像素比的原因。

移动端设备屏幕尺寸非常多，碎片化很严重。

实际ps测量出来的尺寸除以倍率，即为逻辑像素尺寸，所以当设计稿给到640*960时，我们要量出的宽度除以倍率2即为普通屏的宽度（iPhone 6 plus倍率达到了3）。

无论是设计还是开发，都应该尽量以逻辑像素尺寸来进行设计沟通，在基准倍率下，1pt = 1dp = 1px。根据像素密度，真正的元素显示时按照倍率进行缩放。即：在2倍率的屏幕上，定义css样式为10px，实际显示的其实是20px。不同屏幕尺寸下的10px实际大小并不一样，虽然都是10px。

以iPhone 5s为例，屏幕的分辨率是640×1136，倍率是2。浏览器会认为屏幕的分辨率是320×568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

参考：
http://sanwen8.cn/p/1bcT7cC.html
http://yunkus.com/physical-pixel-device-independent-pixels/