iPhone上background-image发虚的根本原因是未适配设备像素比（dpr），1x图在2x/3x屏被插值拉伸；需用@media同时声明-webkit-min-device-pixel-ratio和min-resolution，配合@2x/@3x图及显式background-size才可解决。
为什么 background-image 在 iPhone 上看起来发虚
根本原因是 CSS 声明的 background-image 没有适配设备像素比（dpr）。普通 1x 图在 iPhone 8 及之后机型（2x / 3x 屏）会被浏览器强行拉伸渲染，物理像素被插值填充，结果就是模糊。这不是图片压缩质量或 background-size: cover 单独导致的——哪怕你写 background-size: 750px auto，只要图源是 1x，高 DPR 下照样糊。
@media 中必须同时写 -webkit-min-device-pixel-ratio 和 min-resolution
只写 min-resolution: 2dppx 会漏掉 iOS 9–12 的 Safari；只写 -webkit-min-device-pixel-ratio: 2 则在新版 Chrome/Firefox/Edge 中可能失效。必须用逗号分隔的复合条件确保覆盖：
.hero { background-image: url('bg.jpg'); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.hero { background-image: url('bg@2x.jpg'); }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
.hero { background-image: url('bg@3x.jpg'); }
}
- 两套规则顺序不能颠倒：1x 规则必须放在最前面，作为默认 fallback
- 不要用
resolution: 192dpi这类单位，换算易错且部分 Android 浏览器不识别 - @2x / @3x 文件名需严格对应，路径层级、扩展名完全一致，仅后缀不同
background-size 不设等于白搭
换了 2x 图但没显式设置 background-size，浏览器仍按容器尺寸缩放，高分辨率图被二次插值，锐度反而下降。尤其 cover 在不同 DPR 下缩放逻辑不一致，容易出边界锯齿。
- 若图是设计稿固定宽（如 750px），推荐
background-size: 750px auto，再配合媒体查询调尺寸 - 若需铺满容器且保持等比，用
background-size: 100% 100%，但仅限矢量图或超大原图；普通位图慎用 - 避免
background-size: cover+ 高 DPR 切图混用——cover 的“裁剪点”在不同 dpr 下偏移不可控
部署时三个容易卡住的细节
很多项目写了 media query、准备了 @2x 图，上线后还是糊，问题往往卡在构建或服务器环节：
- Nginx/Apache 默认允许 @ 符号，但某些 CDN 或 Vite/webpack 构建工具会过滤带
@的文件名（如误判为 PostCSS 插件语法），需检查静态资源是否真能被访问到bg@2x.jpg - Webpack 5 默认不解析
@2x后缀，需在assetModuleFilename中显式配置支持 - Vite 项目若用
import方式引入背景图（如动态 class），srcset不生效，必须走 CSS media query 路径
真正起效的前提是：1x 图可访问、2x 图可访问、media query 条件命中、background-size 显式控制——四个条件缺一不可。最容易被忽略的是服务器层对 @2x 文件名的支持状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
