1

例如 ：

我有固定大小块 250x250 像素的图像缩略图。和三个图像：

<img sizes  = "250px"
     src    = "image-250w.jpg" 
     srcset = "image-250w.jpg 250w,
               image-500w.jpg 500w,
               image-750w.jpg 750w"
>

因此，浏览器选择 250w 用于 DPR：1.0 的设备，500w 用于 DPR：2.0 的设备和 750w 用于 DPR：3.0 的设备。

那么这些 DPR 1,2,3 对于人眼的视觉差异是什么？

我没有具有不同 DPR 的设备（iPhone 等）来查看此内容。当我在同一个显示器上执行此操作时，设备仿真无法向我显示这一点。

4

1 回答 1

3

我快速搜索了一下，发现要在标准显示器上模拟 DPR 效果，您需要将 DPR 设置为 2 并通过缩放来缩放视口。2 倍的资产将继续看起来锐利，而 1 倍的资产将看起来像素化。

通过这种方式，您可以直观地测试不同 DPR 值之间的差异。

如需进一步参考，您可以查看此https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#device_pixel_ratio_dpr

于 2018-11-12T05:21:04.117 回答