结论：retina 媒体查询失效主因是语法错误、单位误用（如 192dpi）、浏览器兼容性差异或逻辑组合不当；正确写法应为@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)，并确保资源适配与构建流程完备。
直接说结论：不是 device-pixel-ratio 本身失效，而是你写的媒体查询语法、单位、浏览器兼容性或逻辑组合方式错了——绝大多数“不识别 Retina”的问题，根源在写法越界或条件重叠。
为什么 @media (min-resolution: 192dpi) 在某些 iPhone 上没反应
因为 192dpi 是错误的单位映射。Retina 屏的 DPR=2 对应的是 2dppx，不是 192dpi；96dpi × 2 = 192dpi 这个换算只在“假设标准 DPI 为 96”时成立，但 iOS 设备（尤其是 Safari）根本不按这个基准解析 dpi 值。它只认 dppx 或私有前缀。
-
min-resolution: 2dppx是现代标准，Safari 14+、Chrome、Firefox 全支持 -
min-resolution: 192dpi在 iOS Safari 中基本被忽略，Android Chrome 也部分不支持 - 混写
@media (min-resolution: 2dppx), (min-resolution: 192dpi)看似保险，实则危险：逗号是“或”逻辑，192dpi条件一旦意外命中（比如高缩放 + 高 PPI 笔记本），就会把 2x 样式错加到非 Retina 设备上
-webkit-min-device-pixel-ratio 必须单独写，不能和 min-resolution 套在同一括号里
旧版 iOS Safari（iOS 9–12）不支持 min-resolution，必须靠 -webkit-min-device-pixel-ratio: 2。但它和标准语法不是等价替换关系，也不能合并判断。
- 正确写法是用逗号分隔两个独立条件：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 错误写法：
@media (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2)—— 这要求两个条件同时满足，结果谁都不触发 -
-webkit-min-device-pixel-ratio是浮点值，写2就行，别写2.0（部分旧 Safari 会拒识）
为什么写了媒体查询，背景图还是模糊
媒体查询只是“切换时机”，不代表资源自动适配。模糊的本质是：你用了 1x 图，在 DPR=2 的屏幕上被拉伸渲染，而 CSS 没换图。
- 基础样式必须先定义 1x 图：
background-image: url("icon.png"); - 媒体查询内才覆盖为 2x：
background-image: url("icon@2x.png"); - 文件名必须严格对应，不能只改后缀不改实际像素尺寸：icon@2x.png 必须是原图宽高的 2 倍（如 40×40 而非 20×20）
- 别依赖
background-size: contain救命——它只缩放，不补像素。位图拉伸就是糊，没得救
构建工具或本地开发时容易漏掉的隐性问题
媒体查询生效了，但图 404 了，你根本看不到报错，只会看到模糊的 fallback 图。
- Webpack/Vite 默认不复制
@2x文件，需配置asset规则或手动copy插件 - 本地用
file://协议打开 HTML 时，Safari 会禁用srcset和部分媒体查询加载行为（安全策略），务必用本地 server（如npx serve）测试 - Less/Sass Mixin 中拼接路径时，
~"@{url}@2x.png"的~不能少，否则生成的是字面字符串，不是真实路径 - 如果项目开了 CSS Modules，类名哈希化后，媒体查询里的选择器可能匹配不到目标元素
真正麻烦的从来不是“怎么写媒体查询”，而是确保：1）viewport meta 正确启用移动视口；2）1x/2x 图物理尺寸和命名完全一致；3）构建流程不丢文件；4）测试环境不用 file:// 协议。漏掉任意一环，都会让你对着模糊图反复怀疑人生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
