使用w单位的srcset时，浏览器是否考虑高DPI显示器的真实分辨率？

先给你一个明确的结论：当用w单位写srcset时，浏览器绝对会把高像素密度显示器的物理分辨率算进去，不是只看CSS层面的宽度。

问题1：使用w单位的srcset，浏览器会考虑高DPI显示器的完整分辨率吗？ #

必须会啊。浏览器挑图的时候，会同时计算两个关键值：

• 你给每个图标注的固有宽度（就是w后面的数字）
• 设备实际需要的像素量——也就是「图像在页面里的CSS宽度 × 设备像素比（DPR）」

高DPI屏的物理分辨率之所以重要，就是因为DPR这个因子，它直接决定了浏览器需要多少像素的图才能让显示效果清晰锐利。

问题2：仅用w单位时，浏览器的选择逻辑（用你的例子说明） #

看你给出的这段代码：

<img srcset="image-xl.jpg 2560w, image-l.jpg 1200w, image-m.jpg 900w" src="image_o.jpg" />

假设那台显示器是物理宽度2560px、DPR=2（也就是CSS层面的视口宽度是1280px），而且这张图在页面里是全屏显示的（CSS宽度等于视口的1280px）。那浏览器会算出它需要的图像宽度是：1280px × 2 = 2560px。

这时候image-xl.jpg的2560w刚好完美匹配这个需求，所以浏览器肯定会加载这张图，不会因为CSS宽度是1280就去选1200w的版本。

额外补充： #

如果这张图在页面里不是全屏，比如CSS宽度只有640px，那所需宽度就是640×2=1280px，这时候浏览器会选最接近这个值的1200w的图——毕竟1200比900更接近1280，能保证显示效果的同时兼顾加载性能。

内容的提问来源于stack exchange，提问作者Jaume Mal