设备像素(物理像素), css像素, 设备独立像素, 设备像素比

1. 在做移动页面开发的时候，相信你经常会遇到这种情况：在不同的手机上看时，里面的图片、文字或者线的大小会不一样，有时候大小区别还非常地大。
   原因就是设备像素比在作怪。

设备的屏幕分辨率对于WEB开发者来说是无法通过代码来获得的，是完全透明的。

设备像素

又叫物理像素
是显示屏能够控制的最小显示单位.

css像素

它就是css上用的像素: border: 1px solid black; 它是web编程抽象的概念,不存在的, 它独立于设备, 用于在逻辑上衡量像素

设备独立像素

也叫密度无关像素
用于独立于设备,用于逻辑上衡量像素的单位, 也就是css像素, 可转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系。

获取

screen.width
screen.height

误区,在pc端,我们一直认为这是分辨率,其实不是,只是因为PC端设备像素和设备独立像素数值相等

设备像素比

是设备上物理像素和设备独立像素(device-independent pixels (dips))的比值

通过控制整个值,可以控制页面的放大,快捷键Ctrl+的原理就是这个.

//chrome 为1
window.devicePixelRatio

PPI

像素密度（pixel density）.
全称是（pixel per inch）就是每英寸内有多少个设备像素点.
PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。
标准的PPI是160, 不过现在屏幕标准的少了, 都超过了160.
PPI 值超过300的叫做超高密度屏幕，Apple 给它换了个高大尚的名称：Retina视网膜屏幕

你比如Iphone 5s 设备像素比为2，Iphone 6s 设备像素比为3。至于安卓机中的设备像素比就更多了，有1.3、1.5、2、3等等。
查看更多设备像素比: http://devicepixelratio.com/

参考文章: http://yunkus.com/physical-pixel-device-independent-pixels/