background-size 本身不导致模糊，问题在于未与高 dpr 图源、正确媒体查询、显式尺寸联动；单独使用会拉伸低分辨率图源，引发插值失真。
不是 background-size 本身导致模糊，而是它没和高 DPR 图源、正确媒体查询、显式尺寸三者联动——单独调这个属性等于给一张 1x 图“使劲拉伸”。
为什么 background-size: cover 在安卓上一用就糊
安卓设备 devicePixelRatio 极其混乱：有 1.5（部分中低端机）、2（主流）、2.75（某些折叠屏）、3（旗舰）——但 background-size 不会感知 DPR，只按 CSS 像素缩放。你写 background-size: 750px auto，在 DPR=2 的手机上，浏览器实际要渲染 1500 物理像素宽；若图源仍是 bg.jpg（原始 750px 宽），就得靠插值算法硬拉伸，结果就是发虚、毛边、文字糊成一片。
常见错误现象包括：
- 开发时 Chrome 模拟器看着清楚，真机（尤其 vivo、OPPO 自研 WebView）打开直接糊
- 同一张图，在小米 14（DPR=2.75）上糊，在 OnePlus 12（DPR=2）上还行——说明问题出在图源匹配精度，不是 CSS 写错
- DevTools Network 面板里只看到
bg.jpg请求，bg@2x.jpg根本没加载
@media 查询必须同时写 -webkit-min-device-pixel-ratio 和 min-resolution
安卓 WebView（尤其是微信 X5、QQ 浏览器）基本不认 min-resolution: 2dppx，只吃 -webkit-min-device-pixel-ratio: 2；而新版 Chrome / Edge / Firefox 又逐步弃用后者。单写任一条件都会漏量。
必须用逗号分隔的复合规则，且顺序不能颠倒：
- 默认 fallback 必须放在最前：
background-image: url("bg.jpg"); - 然后才是适配层：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { ... } - 路径、文件名、扩展名必须完全一致，仅后缀不同：
bg.jpg↔bg@2x.jpg，不能写成bg_2x.jpg或漏引号
background-size 不设具体值等于白搭
换了 bg@2x.jpg 却只写 background-size: cover，浏览器仍按容器 CSS 尺寸做等比缩放——而 cover 的裁剪点在不同 DPR 下偏移不可控，高频区域（如人脸、Logo）可能被反复插值，锐度反而下降。
实操建议：
- 若图是设计稿固定宽（如 750px），优先用
background-size: 750px auto，让高 DPR 图物理尺寸精准匹配 - 避免
background-size: 100% 100%，这是纯拉伸，对位图伤害最大 - 必须同步声明
background-position: center center锚定主体，否则 cover 在小屏上裁剪更狠 - 旧版安卓（Android 6–8）WebView 对
background-size解析不稳定，可加-webkit-background-size双写兜底
image-set() 在安卓上基本不可用
安卓绝大多数 WebView（包括微信 X5 v9.0.x、QQ 浏览器 v14.x）只支持带前缀的 -webkit-image-set()，且要求：
- 路径必须绝对或相对一致，不能混用
./和../ - 分辨率描述符必须带单位：
1x✅，2❌，2xpx❌ - Firefox 至今（v128）完全不支持，Safari 16.4+ 才原生支持
image-set()，但会跳过整条声明如果前面有语法错误
所以真实项目中，别把宝押在 image-set() 上——它只是锦上添花，不是雪中送炭。三层兜底（fallback → -webkit → 标准）才是安卓保底的唯一路径。
最易被忽略的一点：所有适配都建立在图源物理尺寸真实翻倍的基础上。用 PS 把 750px 图“放大到 1500px”再存为 @2x，只会更糊——必须是原生拍摄或设计稿导出的 1500px 图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
