window.devicePixelRatio 是高分屏适配的关键入口，它提供设备物理像素与CSS像素的比值，用于动态调整canvas尺寸、图像资源及边框等，避免模糊与显示异常。
为什么 window.devicePixelRatio 是关键入口
高分屏适配不是换套 CSS 就完事，核心在于浏览器是否“意识到”当前设备的像素密度。而 window.devicePixelRatio 就是 JS 层唯一可靠、无需 polyfill 的原生信号——它返回当前设备物理像素与 CSS 像素的比值（比如 Mac Retina 是 2，iPhone 14 Pro 是 3）。
常见错误是直接写死 @media (-webkit-min-device-pixel-ratio: 2) 或只靠 srcset，但这些在 Safari 移动端、某些 Electron 环境或动态缩放（如 Windows 125% 缩放）下会失效或不触发。
实操建议：
- 用
window.devicePixelRatio判断后，动态加载对应资源（如 canvas 绘图时设置canvas.width = width * dpr） - 不要仅依赖 CSS 媒体查询做图像替换，JS 拦截更可控
- 注意：该值在页面缩放时会变化（Chrome/Firefox 支持，Safari 部分版本不响应 zoom 变化）
Canvas 渲染模糊？必须同步设置 width/height 属性和 CSS 样式
Canvas 在高分屏上模糊，90% 是因为只改了 CSS 宽高，没碰 DOM 属性。Canvas 的绘图缓冲区大小由 canvas.width 和 canvas.height 决定，CSS 只控制显示尺寸——两者不匹配就等同于拉伸一张低分辨率图。
典型错误现象：canvas 在 Retina 上边缘发虚、文字锯齿、线条变粗。
实操建议：
- 初始化时按 dpr 缩放：
const dpr = window.devicePixelRatio || 1;canvas.width = Math.floor(width * dpr);canvas.height = Math.floor(height * dpr);canvas.style.width = width + 'px';canvas.style.height = height + 'px'; - 绘图前调用
ctx.scale(dpr, dpr)，避免所有坐标手动乘 dpr - 重绘时记得监听
resize和orientationchange，部分 iOS 设备旋转后dpr不变但布局重排
img 标签用 srcset 还是 picture？看是否要响应视口宽度 + 像素密度双重条件
单纯适配高分屏，srcset 足够；但若同时要根据屏幕宽度（如移动端用小图、桌面用大图）+ 像素密度（同一宽度下 1x/2x 图）选图，picture 才是正解。
容易踩的坑：
-
srcset中写image@2x.jpg 2x，但没配src（fallback），老浏览器或降级场景直接不显示 -
picture里source的media和srcset混用时，优先级易错：浏览器先匹配media，再在匹配的source内按srcset选图 - Webpack/Vite 构建时，静态资源路径未自动补
@2x后缀，导致 2x 图 404（需插件如vite-plugin-imagemin或自定义 resolve）
CSS 字体和边框在高分屏下“变细”？别硬调 transform: scale()
有些团队发现 border: 1px solid #000 在 Retina 上几乎看不见，于是用 transform: scale(2) 把整个元素放大再缩小——这会导致字体渲染异常、事件坐标偏移、动画卡顿。
真正原因：CSS 的 1px 是逻辑像素，在 dpr=2 时只占 1 个物理像素，人眼难辨。
实操建议：
- 用
border: calc(1px * 0.5) solid #000（配合devicePixelRatio动态生成）或改用box-shadow: 0 0 0 0.5px #000模拟细边框 - 字体抗锯齿问题优先检查
-webkit-font-smoothing和font-smooth，而不是强行缩放 - 慎用
transform: scale()做适配，它不改变布局流，但会干扰 pointer-events 区域和 canvas 坐标映射
高分屏适配最麻烦的从来不是代码量，而是不同 API 对 dpr 的响应时机不一致：CSS 媒体查询在页面加载时计算一次，window.devicePixelRatio 在缩放/旋转时可能异步更新，而 canvas 缓冲区一旦设死就不会自动重置。这些时间差才是线上偶发模糊的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
