min-device-pixel-ratio仅能识别DPR，无法解决模糊问题；需配合background-size、伪元素缩放、JS动态scale、srcset及rem/vw等综合适配才能确保物理像素精准映射。
直接用 min-device-pixel-ratio 媒体查询本身不能解决模糊问题——它只能帮你「识别」DPR，但无法改变渲染质量。真正起作用的是后续的资源适配和样式干预。
为什么min-device-pixel-ratio查到DPR后还模糊？
这个媒体查询只是 CSS 层面的“判断开关”，比如你写了：@media (-webkit-min-device-pixel-ratio: 2) { .icon { background-image: url(icon@2x.png); } }
但它不保证图片加载成功，也不处理以下关键点：
- 图片本身尺寸不够（
icon@2x.png实际只有 40×40，而容器宽高是 20px，仍会拉伸） - 未设置
background-size: 100% 100%或具体值，导致浏览器默认平铺或拉伸 - 图片跨域且没配 CORS，
html2canvas或 Canvas 绘制时自动降级为低质量 - 字体、边框、SVG 等非图片元素同样受 DPR 影响，但媒体查询无法批量修复它们
min-device-pixel-ratio该配合什么一起用？
单独查 DPR 没意义，必须绑定具体适配动作。常见可靠组合：
- 背景图：用
@media (-webkit-min-device-pixel-ratio: 2)切换background-image，同时强制background-size: 50% 50%（假设 @2x 图是双倍尺寸） - 1px 边框：在 DPR≥2 下，改用伪元素 +
transform: scaleY(0.5)，避免亚像素渲染失真 - 字体微调：DPR≥2 时，
font-size可略增 1–2px（如从 14px → 15px），补偿视觉灰度降低 - 禁止它单独生效：不要只写
@media (min-device-pixel-ratio: 2)（无前缀），它在 Safari 和多数安卓 WebView 中不识别，必须带-webkit-
更推荐的替代方案：优先用 JS 动态控制
媒体查询静态、覆盖不全，而真实场景中 DPR 可能是 1.5、2.75、3 等非整数，min-device-pixel-ratio 只支持整数匹配。更稳的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
window.devicePixelRatio获取真实值，再决定加载哪套资源或设置 scale - 对
html2canvas，直接传scale: Math.max(2, window.devicePixelRatio || 1)，比媒体查询更准 - 图片资源用
srcset+sizes，让浏览器自己选，无需手写媒体查询 - CSS 中统一用
rem或vw，避免硬写px导致 DPR 错位（比如 1px 在 DPR=3 设备上实际占 3 物理像素，但渲染模糊）
DPR 适配真正的难点不在“识别”，而在“所有渲染路径是否都走对了物理像素映射”。媒体查询只是其中一环，漏掉 Canvas 缩放、图片尺寸、字体抗锯齿任一环节，模糊就藏不住。
