媒体查询不能读取DPR具体数值，但可用min-resolution: 2dppx可靠检测高像素密度环境；推荐搭配-webkit-min-device-pixel-ratio: 2降级，需配合background-size、伪元素缩放等修复模糊，并结合JS响应动态变化。
媒体查询本身不能“读取”设备像素比（DPR）的具体数值，但可以可靠地检测设备是否处于高像素密度环境，从而触发适配逻辑。关键不在于获取数字，而在于用标准 CSS 特性判断渲染条件。
用 min-resolution: 2dppx 判断高清屏
这是目前最推荐的现代写法，符合 W3C 标准，语义明确，兼容性好：
- 2dppx 表示每 CSS 像素至少对应 2 个物理像素，即 DPR ≥ 2，覆盖绝大多数 Retina 屏、安卓高端机
- 它等价于 192dpi（因 1dppx = 96dpi），与设计师常用的 @2x 概念直接对应
- 可直接用于切换背景图、调整字体大小、控制边框粗细等视觉样式
示例：
img.icon { background-image: url(icon.png); }
@media (min-resolution: 2dppx) {
img.icon { background-image: url(icon@2x.png); background-size: contain; }
}
兼容老 iOS WebView 的补充写法
若需支持 iOS 9–12 等旧版 WebKit 内核，可叠加带前缀的媒体特性：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- @media (-webkit-min-device-pixel-ratio: 2)：值为纯数字，无单位，仅限 WebKit/Blink
- Safari 16.4+ 已弃用无前缀的
min-device-pixel-ratio，因此不建议单独使用 - 推荐作为
min-resolution: 2dppx的降级补充，而非主力方案
组合写法更稳妥：
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
/* 高清屏统一适配规则 */
}
适配不只是换图，还要注意缩放和尺寸还原
高 DPR 下，同样 CSS 尺寸的图片会被拉伸模糊，仅换图还不够：
- 背景图需配合 background-size 缩放：DPR=2 时设为
50%，DPR=1.5 时约为66.7% - 1px 边框在 DPR=2 设备上实际只占 0.5 个物理像素，易发虚，可用伪元素 +
transform: scaleY(0.5)模拟 - 避免对 img 元素用媒体查询切换 src——CSS 无法动态修改 HTML 属性，应改用
srcset或 JS 控制
注意媒体查询的静态局限性
媒体查询不会响应 DPR 的实时变化（如横竖屏切换、地址栏收起、系统缩放调整）：
- 若需强动态响应，必须结合 JavaScript：监听
window.matchMedia('(min-resolution: 2dppx)')的 change 事件 - 或定期检查
window.devicePixelRatio，手动更新document.documentElement.setAttribute('data-dpr', dpr)，再用属性选择器驱动样式 - Canvas 渲染、图片懒加载等关键逻辑，不能只依赖 CSS 媒体查询
