H5中媒体查询不能获取DPR值，但可用min-resolution: 2dppx检测高DPI环境以适配样式；需用JavaScript监听change事件或定期检查devicePixelRatio实现动态响应。
在 H5 中，媒体查询本身不能“获取”设备像素比（DPR），但可以通过标准 CSS 媒体特性检测当前设备是否处于高 DPR 环境，从而触发样式或资源的差异化处理。核心是用 min-resolution 或兼容性写法匹配物理像素密度，而不是读取数值。
推荐用 min-resolution: 2dppx 判断高 DPI 设备
这是 W3C 标准语法，语义清晰、现代浏览器支持良好，且与设计师常用的 @2x/@3x 概念直接对应：
-
1dppx表示 1 个 CSS 像素对应 1 个物理像素（DPR = 1） -
2dppx表示至少 2 个物理像素渲染 1 个 CSS 像素（DPR ≥ 2） -
2dppx等价于192dpi（因 1dppx = 96dpi）
兼容旧版 WebKit 的写法（如老 iOS WebView）
若需支持较老环境（如 iOS 9–12），可叠加 -webkit-min-device-pixel-ratio：
-
@media (-webkit-min-device-pixel-ratio: 2)—— 仅限 WebKit/Blink 内核 - 注意：该属性无单位、值为纯数字，且 Safari 16.4+ 已弃用无前缀形式
- 不建议单独使用，应作为
min-resolution的降级补充
实际适配场景示例
媒体查询本身不能切换 <img> 的 src，但可用于控制背景图、字体大小、边框粗细等视觉表现：
- 替换高清背景图：
body { background-image: url(icon.png); }
@media (min-resolution: 2dppx) {
body { background-image: url(icon@2x.png); background-size: contain; }
} - 微调字体或间距（配合 data-dpr 属性更灵活）：
[data-dpr="2"] .title { font-size: 18px; }
[data-dpr="3"] .title { font-size: 20px; }
注意：媒体查询不响应 DPR 动态变化
DPR 可能因系统缩放、横竖屏切换、地址栏收起等实时变动，而 @media 不会自动重触发。如需强响应性，必须结合 JavaScript：
- 监听
window.matchMedia('(min-resolution: 2dppx)')的change事件 - 或定期检查
window.devicePixelRatio并手动更新data-dpr属性 - 避免仅靠 CSS 媒体查询处理关键渲染逻辑（如 Canvas 缩放、图片加载）
