devicePixelRatio用于匹配图片分辨率与屏幕渲染能力，避免模糊；DPR≥2用2x图、≥3可选3x图，配合srcset或动态加载实现高清适配，需注意fallback和横竖屏变化。
用 devicePixelRatio 获取设备像素比，核心是让图片分辨率匹配屏幕实际渲染能力，避免浏览器缩放导致模糊。它不是万能开关，但配合 srcset 或动态加载高倍图，能显著提升移动端清晰度。
理解 devicePixelRatio 是什么
window.devicePixelRatio 返回设备物理像素与 CSS 像素的比值。比如 iPhone 13 的 DPR 是 3，意味着 1px CSS 宽度实际由 3×3=9 个物理像素渲染。若只提供 1x 图片（如 300×200），在 DPR=3 屏幕上会被拉伸到 900×600 显示，必然模糊。
用 devicePixelRatio 判断是否需要高清图
一般认为 DPR ≥ 2 就该优先使用 2x 图；DPR ≥ 3 可考虑 3x 图（但需权衡体积）。常用判断方式：
- 直接读取：
const dpr = window.devicePixelRatio || 1; - 向下取整适配：
const ratio = Math.floor(dpr) >= 2 ? 2 : 1;（避免小数如 2.83 导致无对应资源） - 注意：iOS Safari 和 Android Chrome 都支持，但部分旧版 WebView 可能返回 undefined，建议加 fallback
结合 img 的 srcset 实现自动适配
不推荐手动替换 src，而是用原生 srcset + sizes 让浏览器自主选择：
立即学习“Java免费学习笔记（深入）”；
<img src="icon-1x.png"
srcset="icon-1x.png 1x,
icon-2x.png 2x,
icon-3x.png 3x"
alt="logo">
浏览器会根据当前 DPR 自动选最匹配的图。你只需确保各尺寸图片存在且命名规范，无需 JS 干预。
动态加载时按 DPR 拼接图片 URL
适合背景图、Canvas 绘图或接口返回图片路径的场景：
- 基础逻辑：
const url = `banner-${Math.floor(dpr)}x.jpg`; - 更稳妥写法：
const scale = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1; - 注意：图片服务器需提前生成并部署对应倍率资源（如 banner-1x.jpg / banner-2x.jpg）
- 慎用
Math.round(dpr)，某些安卓机 DPR=2.625，round 后为 3，但可能没 3x 图，反而 404
不复杂但容易忽略：DPR 在横竖屏切换或缩放时可能变化，监听 resize 或 orientationchange 并重新计算更稳妥，不过多数场景初始化一次已够用。
