物理像素

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

设备独立像素

设备独立像素也叫目睹无关像素，可以认为是计算机坐标系统中的一个点。这个点代表一个可以由程序使用的虚拟像素（css像素）。然后由相关系统转换成物理像素。简单来理解，设备独立像素即是：设备独立出来的像素

dpr 设备像素比

设备像素比（device pixel ratio 简称dpr）定义了物理像素和设备像素的对应关系，该值可以按如下的公式得到

设备像素比 = 物理像素 / 设备独立像素

js中可以通过window.devicePixelRatio 获取

视网膜屏

在大多设备上采用的是物理像素和设备独立像素1:1的比例。但有一种例外，那就是视网膜屏。它的设备像素比是2:1的。视网膜屏在iPhone中较为常见

对于dpr = 2 的设备，一个位图像素对应四个物理像素，由于单个位图像素不能再进一步分割，所以只能就近取色，从而导致图片模糊。这就是清晰图片，在某些设备模糊的原因

针对设备dpr=2的解决办法

解决办法是使用比分辨率大两倍的图片，比如页面中显示的是 500 * 500 的image元素，需要提供的图片就是1000 * 1000的图片

拓展知识分辨率和像素

作者：自由自在的心
链接：https://www.zhihu.com/question/21149600/answer/29971490
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

像素即px，是画面中最小的点（单位色块）。
像素的大小是没有固定长度值的，不同设备上1个单位像素色块的大小是不一样的。
分辨率=画面水平方向的像素值 * 画面垂直方向的像素值。
分辨率可以分为两方面：屏幕分辨率和图像分辨率。
屏幕分辨率：例如，屏幕分辨率是1024×768，也就是说设备屏幕的水平方向上有1024个像素点，垂直方向上有768个像素点。像素的大小是没有固定长度的，不同设备上一个单位像素色块的大小是不一样的。例如，尺寸面积大小相同的两块屏幕，分辨率大小可以是不一样的，分辨率高的屏幕上面像素点（色块）就多，所以屏幕内可以展示的画面就更细致，单个色块面积更小。而分辨率低的屏幕上像素点（色块）更少，单个像素面积更大，可以显示的画面就没那么细致
图像分辨率：例如，一张图片分辨率是500x200，也就是说这张图片在屏幕上按1:1放大时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。在同一台设备上，图片分辨率越高，这张图片1:1放大时，图片面积越大；图片分辨率越低，这张图片1:1缩放时，图片面积越小。（可以理解为图片的像素点和屏幕的像素点是一个一个对应的）。
但是，在屏幕上把图片超过100%放大时，为什么图片上像素色块也变的越大，其实是设备通过算法对图像进行了像素补足，我们把图片放的很大后看到的一块一块的方格子，虽然理解为一个图像像素，但是其实是已经补充了很多个屏幕像素；同理，把图片小于100%缩小时，也是通过算法将图片像素进行减少。最后，虽然不同设备上像素块大小会不一样，但是同一台硬件设备上的屏幕分辨率、像素块大小是不会变的。PC电脑上之所以可以调整屏幕分辨率，其实也是通过算法转换了