不同设备间的差异之设备像素比

设备像素比：devicePixelRatio，其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips；

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

非视网膜屏幕上 window.devicePixelRatio 等于1；

视网膜屏幕上 window.devicePixelRatio 等于2；

 

CSS 中的像素

CSS 中的像素是一个相对值，不是绝对值，因此1px 的 CSS 像素并不一定等于 1px 的物理像素。
CSS 中的像素单位只是一种规范，最终的显示是取决于物理设备的。物理设备根据某种规则，决定该采用几个物理像素去显示 1px 的 CSS 像素，这个规则就是设备像素比。

设备像素比

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。

 

详细讲解参考：

https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

https://blog.csdn.net/qq_42068550/article/details/90736240