iPhone上background-image发虚的根本原因是未适配设备像素比（dpr），1x图在2x/3x屏被拉伸导致模糊；需用media query配合@2x图及显式background-size控制。
为什么 background-image 在 iPhone 上看起来发虚
根本原因是 CSS 里写的 background-image 没有适配设备像素比（dpr）。普通 CSS 声明默认按 1x 渲染，而 iPhone 8 及之后多数机型是 2x 或 3x 屏，浏览器会把 1x 图强行拉伸到物理像素密度更高的区域，结果就是模糊。
这不是图片本身压缩问题，也不是 background-size: cover 拉伸导致的——哪怕你用 contain 或固定尺寸，只要图源是 1x，高 DPR 下照样糊。
用 min-resolution 和 -webkit-min-device-pixel-ratio 区分 2x 图
CSS Media Query 支持按设备像素比切图，但要注意兼容写法：现代浏览器认 min-resolution: 2dppx，Safari 旧版本（iOS 9–12）必须靠 -webkit-min-device-pixel-ratio: 2。
关键点不是“加个 media query”，而是确保两套规则互斥、无重叠、且 fallback 安全：
- 基础规则写 1x 图，放在最前面（不带 media）
- 2x 规则用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)包裹 - 2x 图路径必须和 1x 图一一对应，只是文件名加
@2x后缀（如bg.jpg→bg@2x.jpg） - 不要用
resolution单位（如192dpi），它和dppx换算易出错，且部分 Android 浏览器不识别
示例：
.hero {
background-image: url('bg.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.hero {
background-image: url('bg@2x.jpg');
}
}
别漏掉 background-size 的隐含影响
即使换了 2x 图，如果没显式设置 background-size，浏览器仍可能按容器尺寸拉伸图像，导致二次失真。尤其是用 cover 或 contain 时，高分辨率图被缩放后，边缘像素插值会削弱锐度。
更稳妥的做法是：
- 若背景图需铺满容器，用
background-size: 100% 100%（强制等比缩放到容器宽高，不依赖原始图比例） - 若图是固定尺寸设计稿（比如 750px 宽），直接写
background-size: 750px auto，再配合媒体查询调整尺寸 - 避免混用
background-size: cover+ 高 DPR 切图——cover 的缩放逻辑在不同 DPR 下行为不一致
实际部署时容易卡住的三个细节
很多项目切了 2x 图却还是糊，往往栽在这几个地方：
- 服务器没开启对
@2x后缀的静态资源支持（Nginx/Apache 默认允许，但某些 CDN 或构建工具会过滤带@的文件名） - Webpack/Vite 构建时，
url()里的相对路径没被正确解析，导致 2x 规则里加载的是 404 的 1x 图（打开 DevTools → Network 标签页，过滤bg@2x看是否返回 200） - iOS Safari 对 base64 编码的 background-image 不支持
@2x切换，必须用外链图片
最省事的验证方式：在 iPhone 上打开页面，用 Safari 开发者工具连电脑，选中元素，在 Styles 面板里看最终生效的 background-image 是哪个 URL，再点开确认是否为 @2x 版本。
真正麻烦的从来不是写几行 media query，而是确保整条链路——从构建、部署、CDN 缓存，到浏览器解析——都认得清哪个图该在哪个屏幕下出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
