resolution媒体特性在现代项目中基本不可靠，因Safari长期不支持、Firefox仅实验性支持且需手动启用，Chrome仅支持dppx单位，且其匹配的是设备报告的理论分辨率而非真实devicePixelRatio，无法响应缩放等动态变化。
为什么 resolution 媒体特性在现代项目中基本不可靠
直接说结论：resolution（如 min-resolution: 2dppx 或 min-resolution: 192dpi）在绝大多数浏览器中**不被支持或行为不一致**，尤其在 Safari 和 Firefox 中长期缺失支持。Chrome 虽然支持，但仅限于 dppx 单位（device pixels per CSS px），而 dpi、dpcm 在实际渲染中常被忽略或误判。
更关键的是：resolution 匹配的是设备报告的“理论输出分辨率”，不是真实 window.devicePixelRatio，且无法响应缩放、系统字体设置、辅助功能开关等动态变化。你写 @media (min-resolution: 2dppx)，iPhone 15 Pro 可能匹配，但 macOS 上 Chrome 缩放到 125% 的 MacBook 却可能不匹配——它根本没按预期工作。
resolution 的语法陷阱和兼容性现实
即使你坚持尝试，也必须注意三点硬限制：
-
resolution只接受dppx（推荐）、dpi、dpcm，但dpi值不能直接套用物理 PPI（比如 iPhone X 标称 458 PPI ≠458dpi媒体查询有效）； - Safari 完全不支持
resolution—— 所有 iOS/macOS 用户都 fallback 到默认样式； - Firefox 从 120 版本起才实验性支持
resolution，且需启用layout.css.responsive-image.enabled标志，生产环境不可依赖。
示例（慎用）：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.icon { background-image: url(icon@2x.png); }
}
注意：这里用了 -webkit-min-device-pixel-ratio 作降级，因为它是 Safari/iOS 唯一稳定可用的像素比判断方式。
真正可靠的做法：用 device-pixel-ratio 前缀 + JS 动态补位
不要只押注 CSS。实际项目中，高密度适配必须分层处理：
- 图像资源用
srcset+sizes，由浏览器自动选最匹配的源，完全绕过 CSS 查询； - CSS 中优先使用
min--moz-device-pixel-ratio、-o-min-device-pixel-ratio、-webkit-min-device-pixel-ratio这些带前缀的老式写法，它们在各自引擎中稳定运行多年； - 对关键 UI（如 1px 边框、图标尺寸微调），用 JS 读取
window.devicePixelRatio，动态加 class 到上，再写对应 CSS；
JS 示例（轻量、无框架依赖）：
document.documentElement.classList.add(
`dpr-${Math.round(window.devicePixelRatio * 10) / 10}`
);
// 生成 class 如 dpr-2、dpr-3、dpr-1.5
对应 CSS：
.dpr-2 .btn::after { transform: scaleY(0.5); }
.dpr-3 .btn::after { transform: scaleY(0.33); }
容易被忽略的致命细节：PPI ≠ DPR，且 PPI 不可测
很多人搜“PPI 媒体查询”，但浏览器 **根本不暴露原始 PPI 值**。window.devicePixelRatio 是操作系统提供的逻辑比值，已做过归一化处理（如 Windows 缩放 150% 时返回 1.5，不管屏幕真实是 220 还是 265 PPI）。你试图用媒体查询匹配“326 PPI”或“458 PPI”，本质上是在匹配一个不存在的接口。
真正该盯住的只有两个东西：devicePixelRatio（JS 可靠读取）和 width/height 视口尺寸（CSS 媒体查询稳定支持）。其他所有基于 PPI 的硬编码，都是在给未来埋雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
