devicePixelRatio为1.25时为何Firefox加载2x图Chrome加载1x图？

各浏览器具体加载规则 #

不同内核浏览器在两种分辨率图片间做选择时，触发2x图加载的阈值存在明显区别：

• Firefox：devicePixelRatio≥1时即加载2x图片
• Chromium内核浏览器（Chrome、Edge等）：仅当devicePixelRatio≥1.5时才会加载2x图片
• Safari：缩放网站页面时该浏览器的devicePixelRatio数值不会发生变化，目前暂未测出其对应的资源选择逻辑

规范现状 #

这套资源选择逻辑目前没有公开的统一执行标准，在MDN等官方技术文档平台暂未查询到对应的规则说明，不少前端开发者都曾被这个跨浏览器表现不一致的问题困扰。

常见问题与临时解决方案 #

实际开发中最容易遇到的问题是：当设备devicePixelRatio为1.25时，Chrome浏览器加载的1x图片实际显示效果非常模糊。目前可使用的临时解决方法是将2x图片标注为1.5像素密度描述符，强制浏览器在该像素比场景下加载高清资源。

提示：可以使用srcset特性相关测试站点，自行验证不同浏览器对该响应式图片能力的实际支持表现。

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