准确检测retina屏的核心是window.devicepixelratio≥2，它是唯一稳定、无需polyfill的原生信号；其他方法如媒体查询、ua解析或宽高比计算均因兼容性或响应性问题不可靠。
直接用 window.devicePixelRatio 判断，值 ≥ 2 就是 Retina 类设备；别信媒体查询或 UA 字符串，它们在 Safari 移动端、Electron 或系统缩放下容易失效。
怎么准确检测当前是否为 Retina 屏
核心就一条：window.devicePixelRatio 是唯一稳定、无需 polyfill 的原生信号。它返回物理像素与 CSS 像素的比值，MacBook Pro 通常是 2，iPhone 14 Pro 是 3，普通 Windows 笔记本是 1。
- 不要依赖
@media (-webkit-min-device-pixel-ratio: 2)：Safari iOS 对该查询支持不一致，且无法响应页面缩放变化 - 别解析
navigator.userAgent：UA 可伪造、可省略关键字段（如 iPad 不带 Mobile），且和像素密度无直接关系 - 避免只查
screen.width / window.innerWidth：受缩放、DPR、视口设置多重干扰，结果不可靠 - 正确写法：
const isRetina = window.devicePixelRatio >= 2;，建议加兜底|| 1
为什么 matchMedia('(min-resolution: 2dppx)') 不够用
matchMedia 查 min-resolution 看似合理，但实际落地时有硬伤：它只在 CSS 渲染层生效，而 JS 逻辑常需在资源加载、Canvas 初始化等早期阶段就决策——此时样式可能未计算完毕，matches 返回 false 是常态。
- Chrome/Firefox 支持
dppx单位，但 Safari 旧版本仅认dpi，需写两套规则才能覆盖 - Windows 系统缩放（如 125%）会改变
devicePixelRatio，但不会触发min-resolution媒体查询变更 - Electron 环境中，
matchMedia可能始终返回默认值，而devicePixelRatio仍可读 - 调试时可用：
window.matchMedia('(min-resolution: 2dppx)').matches辅助验证，但不能作为主判断依据
检测后立即做什么才不白测
拿到 devicePixelRatio 值不是终点，而是资源调度和渲染控制的起点。很多模糊问题不是没检测，而是检测了却没用对地方。
-
<img>标签必须配srcset+x描述符，且提供 1x/2x/3x 实际尺寸图，不能只靠sizes+w -
<canvas></canvas>必须同步设置canvas.width/canvas.height（乘 dpr 后取整）和canvas.style.width/canvas.style.height（保持 CSS 尺寸），再调ctx.scale(dpr, dpr) - CSS 背景图若用
-webkit-image-set()，得写全1x,2x,3x，漏掉1x在部分 Safari 中会 fallback 到低分图 - 0.5px 边框要 JS 动态生成：
border: ${0.5 * dpr}px solid #000，不能只靠transform: scale(0.5)模拟
真正容易被忽略的是：DPR 可能在运行时变化（比如插拔外接 Retina 显示器、系统缩放调整），resize 事件不保证触发，得监听 matchMedia('(min-resolution: 2dppx)').addEventListener('change') 才可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
