我试图模拟一个设备。我不明白DPR的作用。例如，如果我想添加分辨率为720×1440的手机。我写了360×720，让它以100%变焦的方式放在我的笔记本电脑屏幕上，这意味着现在它占据了我笔记本电脑屏幕的360×720像素。我认为DPR用于以降低的屏幕分辨率将更高分辨率的设备安装到其他屏幕中，在我的情况下，DPR应该是2。我做了很多实验，我认为应该为笔记本电脑设置DPR，假设我屏幕上360×720的区域实际上是720×1440。然而，如果DPR是我认为的，那么window.screen.width；必须返回720。但它仍然返回360。只要我看到chrome开发工具的预添加设备列表，这个理论就适用。DPR背后的真正逻辑是什么？如何才能真正添加我的720×1440设备？我的设备必须设置多长宽？
CSS像素和设备像素之间没有一对一的映射。一些设备使用四个较小的像素比一个CSS像素，排列在2x2网格。有些使用一个，有些使用九个(3x3网格(。甚至可以是二者之间的分数比，如1.5或2.25。
在一个方向上组成CSS像素的设备像素数是其设备像素比(DPR(。您可以将其解释为宽度适合一个CSS的设备像素网格的(或高度(像素
以下是我对它的理解。
首先，更高分辨率的设备有更多的像素可用于显示图像。
假设有两个4英寸宽的装置。设备1可以在该空间中容纳2000个像素，而设备2只能容纳1000个像素。
设备1宽2000像素，因此可以显示宽度为2000w完美。但设备2有1000像素宽，因此无法显示这张照片非常完美。它必须将颜色值"平均化"一些像素。用2000w为这个设备服务毫无意义图片：这只是不必要的数据下载。你会给它小一点形象
设备2甚至会与宽度为1200w的图像发生冲突。它会仍然需要平均出一些像素。但它比2000w的图像，而且更小。
来源：https://tomroth.com.au/dpr/