移动端图片模糊主因是高 DPR 屏幕拉伸低分辨率图，解决需三步：提供多倍图、控制渲染、规避 CSS 背景缩放；优先用 srcset + sizes 配合 w 描述符与真实 sizes 值；背景图改用 img + object-fit；Canvas 绘图须按 devicePixelRatio 缩放；导出切图必须同步 @2x/@3x 并确保命名路径一致。
移动端图片模糊，基本不是图片本身质量差，而是浏览器在高 window.devicePixelRatio 屏幕上拉伸了低分辨率图——解决核心就三点：提供多倍图、控制渲染方式、绕开不可控的 CSS 背景缩放。
用 srcset + sizes 让 ![]()
这是最稳妥、无需 JS、兼容性最好的方案。关键不是“换格式”，而是让浏览器知道“这张图在不同视口下该用哪张”。
-
srcset里只用w描述符（比如"logo-400w.png 400w"），别混用x和w，否则 Safari 可能忽略 -
sizes必须写真实 CSS 宽度，比如"(max-width: 768px) 100vw, 50vw"，不能写成"100%"或空字符串 - 导出切图时，若设计稿是 375px 宽，就得提供
logo-750w.png（@2x）、logo-1125w.png（@3x）两版，且命名和srcset中的路径严格一致 - 不要依赖
src单图兜底——老浏览器才靠它，现代浏览器优先按srcset+sizes决策
背景图模糊？别用 background-image 硬扛
CSS 背景图在 cover / contain 下会被浏览器重采样，尤其在 iOS Safari 上几乎必糊。真要全屏适配，直接换
- 把背景图改用
- 禁用
background-attachment: fixed，它在滚动中触发高频重绘，部分安卓 WebView 会主动降质 - 纯色/渐变/几何纹理，一律用
background: linear-gradient(...)或内联 SVG data URL，零失真 - 必须用位图背景时，分辨率至少是最大容器尺寸的 2 倍（如容器最大 1920×1080，图不低于 3840×2160）
Canvas 绘图或 html2canvas 截图模糊
本质是没对齐物理像素。Canvas 默认按 CSS 像素绘制，但 Retina 屏一个 CSS 像素占 2×2 物理像素，不放大坐标系就必然糊。
- 创建 canvas 时，先读
window.devicePixelRatio，再设canvas.width = width * ratio、canvas.height = height * ratio - 紧接着调用
ctx.scale(ratio, ratio)，这样所有绘图逻辑仍用 CSS 尺寸写，不用改业务代码 - html2canvas 必须升级到 1.4.0+ 版本，旧版（如 0.4.x）根本不读
devicePixelRatio - 调用时显式传
scale: window.devicePixelRatio，别只靠默认值；如果生成后还要下载，记得用canvas.toDataURL("image/png", 1)锁死质量
最容易被忽略的是：所有“导出”环节（PSD/Figma/Sketch）必须同步输出 @2x/@3x 图，并确保文件名、路径、srcset 声明三者完全一致——漏掉任意一环，前端再怎么配都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
