先说结论：仅使用 @media (min-resolution: 2dppx) 即可准确识别主流 Retina 屏幕——但若只写这条规则，旧版 iOS Safari 将无法生效。必须同时搭配 @media (-webkit-min-device-pixel-ratio: 2)，才能实现全平台兼容，覆盖所有设备，一个都不遗漏。
为什么 min-resolution: 192dpi 常常失效
这并非浏览器 bug，而是单位使用错误所致。dpi 值受系统缩放影响极大——以典型场景为例：Windows 笔记本若设置 125% 缩放，min-resolution: 192dpi 很可能完全不会触发。相比之下，2dppx 直接映射设备像素比（DPR），既不依赖物理英寸，也不受系统 DPI 设置影响，Safari 14+、Chrome、Firefox 均完美支持。
1dppx表示 1 个 CSS 像素由 1 个物理像素渲染（普通屏幕的标准）2dppx表示 1 个 CSS 像素由至少 2×2 个物理像素组成（这才是 Retina 屏幕的核心特征）- 切勿混写
@media (min-resolution: 2dppx), (min-resolution: 192dpi)——逗号表示“或”逻辑，192dpi在高缩放环境下很可能误触发，导致 2x 样式错误地应用于非 Retina 设备
@media 规则中 background-image 必须配合 background-size 使用
仅替换图片而不调整尺寸，高清图反而更模糊，这一点常被忽略。浏览器默认将 icon@2x.png（例如 200×200px）视为 200×200 CSS 像素渲染，相当于放大两倍显示，细节尽失。
- 原图
icon.png尺寸为 100×100px → 逻辑尺寸应为100px 100px - @2x 图片
icon@2x.png尺寸为 200×200px →background-size必须显式设置为100px 100px - 若容器本身宽高为
50px，则background-size应为50px 50px，切勿按图文件尺寸直接设置 - 省略此步骤，即使
@media写得再精准也毫无意义
兼容写法必须用逗号分隔，不要放在同一个括号内
旧版 iOS Safari（iOS 9–12）不支持 min-resolution，且无法与现代语法合并判断。错误写法 @media (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2) 要求两个条件同时满足，导致谁也不触发——等同于无效编写。
正确做法是：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)-webkit-min-device-pixel-ratio为浮点值，直接写2即可，切勿写成2.0——部分旧版 Safari 会拒绝识别- 基础样式应首先定义 1x 图片：
background-image: url("icon.png"); - 在媒体查询内覆盖为 2x 图片：
background-image: url("icon@2x.png");
还有一个极易被忽略的细节：文件名与物理尺寸必须严格对应。若你使用 icon@2x.png，其像素尺寸必须是原图的两倍；否则即使媒体查询命中、background-size 设置正确，图片依然会模糊——因为位图本身并未提供额外的像素信息可供补充。
