iphone图片发虚主因是srcset的width描述符误用，应改用x描述符匹配dpr；max-width:100%后仍模糊需重置image-rendering；构建工具不处理srcset路径需手动引入；安卓低端机需配合sizes才能正确加载@2x图。
图片在iPhone上发虚，srcset没起作用？先看width描述符是否写对了
多数人加了srcset但图片依然模糊，根本原因是浏览器没选中高DPR版本——它按CSS像素解析1x/2x时，依赖的是width描述符（如400w）和当前视口宽度的比值，而不是设备DPR。iPhone 14的视口宽是390px，但<img srcset="a@1x.jpg 390w, a@2x.jpg 780w">这种写法会让浏览器认为“780w图只在780px宽屏幕才用”，结果永远选390w那张。
正确做法是用x描述符明确匹配DPR：
-
<img src="a@1x.jpg" srcset="a@1x.jpg 1x, a@2x.jpg 2x">—— 简单场景够用，浏览器按设备像素比直接选 - 必须用
w描述符时，srcset里的宽度要按物理像素算：iPhone 14视口CSS宽390px × DPR=3 → 1170w，对应图尺寸应为1170×… - 别混用
w和x，浏览器会忽略x部分
CSS设置max-width: 100%后图片还是糊？检查image-rendering是否被重置
响应式布局里给<img>加max-width: 100%很常见，但某些UI框架（比如Tailwind默认配置）或重置样式表会把image-rendering: crisp-edges或pixelated打进来，导致浏览器强行插值缩放，高清图反而变糊。
解决方法很简单：
- 显式覆盖：
img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } -
-webkit-optimize-contrast在Safari/iOS最稳，crisp-edges在Chrome/Firefox支持更好 - 避免用
smooth或留空，那是默认行为，会触发双线性插值 - 注意：这个属性不影响
srcset选图逻辑，只影响最终渲染质量
Webpack/Vite打包后srcset路径错乱？别让构建工具自动改src却漏掉srcset
构建工具（尤其是Webpack的file-loader或Vite的asset处理）默认只处理src、href等白名单属性，srcset里的路径不会被重写，导致上线后404或回退到低清图。
实操方案分情况：
- Vite项目：用
import方式引入图片，再拼srcset，确保路径被解析：const img1x = new URL('./a.jpg', import.meta.url);<br>const img2x = new URL('./a@2x.jpg', import.meta.url);<br>@@##@@ - Webpack 5+：启用
experiments.topLevelAwait后可用类似方式；否则得配html-webpack-plugin的srcset扩展或自定义loader - 别信“自动识别
srcset”的插件，多数不处理逗号分隔的多值
安卓低端机加载@2x图失败？srcset + sizes必须成对出现
只写srcset不写sizes，浏览器会按“假设图片占满视口”来估算资源需求，导致在小屏安卓机（比如360px宽）下仍去请求2x图，而网络差或内存紧时直接失败，回退到src的低清图。
加上sizes才能让浏览器精准预估：
<img src="%7Bimg1x.href%7D" srcset="{`${img1x.href}">-
sizes告诉浏览器：“这图在小屏占满宽度，在大屏只占一半”，浏览器据此决定拉哪张 - 不写
sizes时，1x/2x描述符实际无效，浏览器全靠src兜底 - 调试时看Network面板，过滤
img，确认请求的确实是@2x路径而非@1x
真正卡住人的不是srcset语法，而是它和CSS渲染、构建流程、设备DPR三者之间的隐式耦合。尤其当设计师给的切图命名不统一（比如@2x但尺寸却是物理像素×1.5）、或者后端返回的HTML没经过构建工具处理时，问题会藏得很深。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
