物理像素和设备独立像素（dpr）

1.物理像素

(1)物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

(2)设备独立像 像索(也叫目睹无关像素)， 可以认为是计算机坐标系统中得一 个点，这个点代表一个可以由程序使用的虚拟像索(css像素)，然后由相关系统转换为物理像素
(3)物理像索比(device pixel ratio )设备像素比 (简称dpr )定义了 物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到：设备像素比=物理像素 / 设备独立像素，js中可以通过window devicePixelRatio
(4)在pc端上，1css像素=1物理像素，即dpr= 1:1 ;但是在iPhone上，1css像素=4物理像素，即dpr=2:1

2.位图像素
(1) 1个位图像素是栅格图像(如: png，jpg，gif等)最小的数据单元。每个位图像素都包含这一些资深的现实信息 (如:显示位置，颜色值，透明度等)
在普通屏幕下是没问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况
(2)对于dpr= 2的，1个位图像索对应于4个物理像索,由于单个位图像素不以再进步分割，所以只能就近取色，从而导致图片模糊解决办法使用分辨率大两倍的图片
如200*300 img标签,就需要提供400*600的图片.由此一来位图像素点的个数是原来的4倍，在retina屏幕下，位图像素点个数就可以物理像素点个数形成1:1的比例，图片自然就清晰了。
(3)这里就还有另一个问题，如果普通屏幕下，也用了两倍图片，会怎样呢?
很明显，在普通屏幕下，200x300(css pixel)img标签，所对应的物理像素个数就是200x300个,而两倍图片的位图像素个数则是200x300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之- -， 我们称这个过程叫做downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差，但还是可以接受的