HTML如何识别Retina屏幕？

准确检测Retina屏幕唯一可靠、原生且无需polyfill的方法是直接读取`window.devicePixelRatio >= 2`，它精准反映物理像素与CSS像素的比值，而媒体查询（如`min-resolution: 2dppx`）、UA解析或宽高比计算等方案均因浏览器兼容性差、响应不及时、易受缩放干扰或逻辑不可靠而被证实失效；检测只是起点，关键在于立即用该值驱动高清资源加载（如`srcset`多倍图）、Canvas渲染适配（缩放+尺寸分离）、CSS边框精细化控制，并监听`matchMedia`的`change`事件以应对DPR动态变化——真正解决高清屏适配问题，靠的不是“猜设备”，而是实时、精准、可响应的像素密度感知。

直接用 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 值不是终点，而是资源调度和渲染控制的起点。很多模糊问题不是没检测，而是检测了却没用对地方。

• 标签必须配 srcset + x 描述符，且提供 1x/2x/3x 实际尺寸图，不能只靠 sizes + w
• 必须同步设置 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') 才可靠。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML如何识别Retina屏幕？》文章吧，也可关注golang学习网公众号了解相关技术文章。