设备像素比（Device Pixel Ratio, DPR）：其实指的是 window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，一个设备的物理像素与逻辑像素之比。
DPR = 物理像素(设备像素) / 独立像素(CSS像素)
当像素比为1:1时，使用1个物理像素显示1个CSS像素；当像素比为2:1时，使用4个物理像素显示1个CSS像素；当像素比为3:1时，使用9（33）个设备像素显示1个CSS像素*。
设备像素比
像素为什么会有“物理”和“逻辑”之分，它们之间什么区别？
其实在很久以前，的确是没区别的，CSS里写个 1 px ，屏幕就给你渲染成1个实际的像素点，DPR=1，多么简单自然~
后来苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是说这种屏幕拥有的物理像素点数比非高清屏多4倍甚至更多。如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4，这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题。
举个例子，iPhone 6的物理像素上面已经说了，是 750 * 1334，那它的逻辑像素呢？我们只需在 iPhone 6 的Safari里打印一下 screen.width 和 screen.height 就知道了，结果是 375 * 667，这就是它的逻辑像素，据此很容易计算出 DRP为2。当然，我们还可以直接通过 window.devicePixelRatio 这个值来获取 DRP，打印结果是 2，符合我们的预期。
举例：
设备宽高为 375×667，可以理解为设备独立像素(或css像素)，dpr为2，根据上面的计算公式，其物理像素就应该 ×2，为 750×1334。
设备像素比
上图中可以看出，对于这样的css样式：
width: 1px;
height: 1px;
相同尺寸下，普通屏幕 VS Retina 屏，css像素所呈现的物理尺寸（大小）是一致的，不同的是一个css像素所对应的物理像素的个数不一致：
- 普通屏幕：css像素：物理像素 = 1:1
- retina屏： css像素：物理像素 = 1:4
即4个物理像素显示一个css像素；
从以上现象得出的结论是：
UI设计师按照手机物理像素出设计稿，切图时根据其设备像素比来换算设备独立像素（CSS像素），比如视网膜手机iPhone6，物理像素 750px×1334px，由于其设备像素比为2，CSS切图时需要将设计稿的所有尺寸除以2，才是正确CSS像素值。
网友评论