直接用@media (min-resolution: 2dppx)可稳定识别主流Retina屏，但需搭配(-webkit-min-device-pixel-ratio: 2)覆盖旧版iOS Safari；192dpi受系统缩放干扰易失效，而2dppx直连DPR更可靠；换@2x图必须显式设background-size为逻辑尺寸，否则高清图反糊。
直接用 @media 配合 resolution 媒体特性即可，但要注意：它不适用于所有设备，且单位必须明确写 dppx 或 dpi，不能只写数字。
为什么 resolution 容易失效？
浏览器对 resolution 的支持很分裂——Chrome 和 Safari 支持 min-resolution，Firefox 仅支持 -moz-resolution（已弃用），而 Edge 在旧版本中行为不一致。更关键的是：resolution 检测的是**设备像素比（DPR）或物理分辨率**，不是 viewport 宽度，所以它和 max-width 是两类逻辑，混用时容易误判。
-
screen and (min-resolution: 2dppx)表示 DPR ≥ 2（如 Retina 屏） -
screen and (min-resolution: 192dpi)表示每英寸至少 192 点（需换算：2dppx ≈ 192dpi @ 96 CSS px/in） - 不写单位（如
(min-resolution: 2)）会直接被忽略 - 移动端 Safari 对
resolution的支持仅限于部分 iOS 版本，iOS 15+ 才较稳定
resolution 和 device-pixel-ratio 怎么选？
优先用 resolution，它是标准属性；-webkit-min-device-pixel-ratio 是旧版 WebKit 私有前缀，现在仅作兼容补丁。
- 标准写法：
@media screen and (min-resolution: 2dppx) { ... } - 兼容旧 Safari：
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... } - 不要混用：
and (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2)会导致整个规则被丢弃（逻辑 and 失败） - 现代项目可放弃
-moz-和-o-前缀，它们早已无效
实际适配建议：别只靠 resolution
单靠分辨率切换样式风险高——比如高 DPR 手机可能 viewport 宽度只有 375px，但你写了 @media (min-resolution: 2dppx) and (min-width: 1024px)，这条规则永远不会命中。
立即学习“前端免费学习笔记（深入）”；
- 真正可靠的组合是：
resolution+width或orientation，例如：@media screen and (min-resolution: 2dppx) and (max-width: 768px) - 图标/图片替换更稳妥的做法是用
srcset+sizes，而非纯 CSS 控制 - 字体、阴影、边框等细节优化才适合用
resolution微调，比如box-shadow: 0 0 4px rgba(0,0,0,0.2)在 2x 屏上改用8px
真正要小心的是：很多人把 resolution 当成“高清屏开关”，却忽略了它无法反映用户当前缩放行为、浏览器 zoom 设置或系统字体缩放——这些都会让实际渲染效果偏离预期。用之前，先在真机上连 DevTools 检查 window.devicePixelRatio 值是否和媒体查询匹配。
