根本原因是未适配设备像素比（DPR），须同时满足：提供@2x/@3x图、用复合媒体查询（-webkit-min-device-pixel-ratio与min-resolution并存）、显式声明background-size（如750px auto），三者缺一不可。
图片在 iPhone 或高 DPR 安卓机上发虚，不是 image-rendering 没设对，而是根本没加载到匹配设备像素比（DPR）的图——媒体查询必须同时命中、路径必须严格一致、background-size 必须显式写死，三者缺一不可。
为什么只写 @media (min-resolution: 2dppx) 还是糊
旧版 iOS Safari（iOS 9–12）根本不认 min-resolution，只认 -webkit-min-device-pixel-ratio；而新版 Chrome/Firefox 对 -webkit- 前缀支持变弱。单写任一条件都会漏设备。
- 必须用逗号分隔的复合写法：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 顺序不能颠倒：1x 默认规则必须放在最前，作为所有浏览器 fallback
- 别混用单位：
min-resolution: 192dpi和2dppx数值等价，但语义不同，部分 Android 浏览器不识别 dpi
background-size 写 cover 或 100% 100% 为什么救不了模糊
cover 只控制缩放逻辑，不改变图源分辨率。一张 bg.jpg（750×400）在 DPR=3 的 iPhone 上仍被拉伸 3 倍渲染，插值填充物理像素，结果就是毛边。
- 必须写具体尺寸，比如设计稿宽度是 750px，就写
background-size: 750px auto - 别用
contain或auto单独出现——它会按容器宽高比例缩放，无法保证像素对齐 - 如果容器本身有
transform: scale(0.9)或 flex/gird 布局偏差，max-width: 100%算出的渲染尺寸 ≠ 图片原始像素尺寸，此时再设background-size也无效
文件名和构建工具怎么悄悄搞砸多倍图
Vite、Webpack 默认 asset 处理不解析 srcset 或 CSS 中的 URL 字符串，bg@2x.jpg 里的 @ 符号还可能被某些 CDN 或插件过滤掉，导致 404 后自动回退到 @1x 图。
- 确保三张图真实存在且命名完全一致：
bg.jpg/bg@2x.jpg/bg@3x.jpg（大小写、扩展名、路径一个都不能差） - Vite 用户需在
vite.config.ts中显式配置assetsInclude支持@符号：assetsInclude: ['**/*.@(2x|3x).@(png|jpg|jpeg)'] - Webpack 用户检查
file-loader或asset-module的generator.filename是否保留了@字符
最容易被忽略的是：父容器用了 transform、scale 或弹性布局错位时，就算你加载了 @3x 图、写了 750px auto，浏览器实际渲染的像素尺寸仍和原始图不匹配——这时 image-rendering 也无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
