我试图模拟一个设备。我不明白 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 设备？必须为我的设备设置什么长度宽度？
1091 次
1 回答
1
CSS 像素和设备像素之间没有一对一的映射。一些设备使用 4 个较小的像素到 1 个 CSS 像素，排列成 2x2 网格。有些使用一个，有些使用九个（3x3 网格）。两者之间甚至可以有一个分数比，比如 1.5 或 2.25。
在一个方向上构成 CSS 像素的设备像素数是其设备像素比 (DPR)。您可以将其解释为适合一个 CSS 像素的设备像素网格的宽度（或高度）。
这是我的理解。
首先，更高分辨率的设备有更多的像素可用于显示图像。
假设有两个 4 英寸宽的设备。设备 1 可以在该空间中容纳 2000 个像素，而设备 2 只能容纳 1000 个像素。
设备 1 的宽度为 2000 像素，因此可以完美显示宽度为 2000w 的图像。但设备 2 的宽度为 1000 像素，因此无法完美显示此图像。它必须“平均”一些像素的颜色值。使用 2000w 映像为该设备服务是没有意义的：这只是不必要的数据下载。你会给它一个更小的图像。
设备 2 甚至无法处理宽度为 1200w 的图像。它仍然需要平均一些像素。但它比 2000w 图像要好得多，而且也小得多。
于 2021-03-23T15:22:00.483 回答