移动端高清屏模糊主因是浏览器将1个css像素映射到2或3个物理像素导致拉伸失真，解决需用srcset+sizes提供多倍图并准确声明显示宽度，辅以image-rendering提升渲染质量。
为什么![]()
在移动端高清屏上模糊
不是图片本身质量差，而是浏览器按逻辑像素渲染时，把1个CSS像素硬塞进2或3个物理像素里——比如设计稿切了375px宽的图，直接丢进<img style="max-width:90%">，在iPhone 15（dpr=3）上，这图只有375×物理像素，但屏幕要填满1125×物理像素，浏览器只能拉伸，一拉就糊。
用srcset + sizes提供多倍图源
这是最稳妥、无需JS、兼容性覆盖所有现代移动端浏览器的方案。关键不是“换图”，而是告诉浏览器：“这个位置在不同视口下占多宽，你挑最匹配的图来载”。
-
srcset里混用w和x描述符会失效，只选一种：推荐w（如"logo-400w.jpg 400w, logo-800w.jpg 800w"），它基于实际显示宽度选图，比2x更适应折叠屏、分屏等场景 -
sizes必须写对：比如sizes="(max-width: 768px) 100vw, 50vw"，表示小屏时占满视口，大屏时只占一半——浏览器靠这个预判该加载哪张 - 图片文件名建议带分辨率标识，如
icon@2x.png、banner@3x.jpg，导出时确保@2x图宽高是@1x的2倍（不是放大两倍，是重绘两倍尺寸）
CSS层面强制渲染质量
即使资源到位，某些安卓WebView或旧版Safari仍可能用低质量插值算法拉伸，加一行image-rendering能干预：
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
注意：pixelated在Chrome/Firefox有效，-webkit-optimize-contrast对Safari更友好；别用auto或留空，默认就是模糊拉伸。
容易被忽略的切图与交付细节
前端给设计师提需求时，常漏掉三个硬性条件：
- PSD导出必须勾选
导出@2x/导出@3x，而不是手动放大图层再导出——后者会触发Photoshop重采样，细节失真 - 导出PNG时禁用
色彩空间自动转换，否则sRGB转Display P3可能导致色偏+模糊感 - 所有
<img>标签必须设width和height属性（哪怕只是占位），否则浏览器无法提前计算布局，可能触发两次重排+拉伸
真正卡住效果的，往往不是代码写错，而是切图时没按dpr重绘、交付时没给全分辨率资源、或者忘了告诉浏览器“这张图实际要占多宽”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
