Question

例如：

我有固定尺寸的图片缩略图，尺寸为250x250px。还有三张图片：

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

因此，浏览器为DPR：1.0的设备选择候选者250w，对于DPR：2.0的设备选择候选者500w，对于DPR：3.0的设备选择候选者750w。

那么这些DPR 1,2,3对人眼的视觉区别是什么？

我没有使用其他DPR的设备（iPhone等）来查看此内容。而且，当我在同一显示器上进行设备仿真时，无法显示此内容。

Answer 1

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

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

有关更多参考，您可以查看此https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#device_pixel_ratio_dpr

DPR：1.0，DPR：2.0，DPR：3.0对人眼的视觉区别是什么？

1 个答案: