最可靠的是真机测试，但成本高、覆盖有限；更高效的是结合chrome devtools模拟dpr（1/2/2.5/3）+ 少量真机验证，重点检查canvas渲染清晰度、文字边缘锐利度及1px线条表现，并通过console.log、对比div与canvas渲染、小程序wx.getsysteminfosync等多方式交叉验证。
直接在真实设备上测试最可靠，但成本高、覆盖有限；更高效的做法是结合浏览器开发者工具模拟 + 少量真机验证，重点观察 Canvas 渲染是否清晰、文字边缘是否发虚、1px 线条是否锐利。
用 Chrome DevTools 模拟不同 DPR
Chrome 浏览器（v120+）支持精确模拟设备像素比：
- 打开开发者工具（F12），切换到 Network Conditions 或 Rendering 面板
- 在 Rendering 面板中勾选 Emulate device pixel ratio，输入 1、2、3 或 2.5 等值
- 刷新页面后，
window.devicePixelRatio会返回你设定的值，Canvas 适配逻辑即可触发 - 注意：此时
canvas.width/height和ctx.scale()是否按预期放大，可用console.log(canvas.width, canvas.height)验证
在真机上快速验证 DPR 表现
不依赖调试工具，用最小代码现场判断：
- 在页面加一段脚本：
console.log('DPR:', window.devicePixelRatio)，用手机浏览器访问并查看控制台（如 Safari 的 Web Inspector 或 Chrome for iOS/Android） - 画一个 100×100 的 Canvas，绘制一条
ctx.fillRect(0, 0, 1, 1)—— 在 DPR=2 设备上，它应占据 2×2 物理像素；若看起来像“灰点”或模糊块，说明未适配 - 对比同一段绘图代码在 iPhone（DPR=3）、华为 Mate 系列（DPR=2.5~3.0）、普通安卓（DPR=1.5~2）上的实际输出效果
用 CSS 辅助肉眼识别 DPR 影响
添加视觉参照物，让模糊更易察觉：
- 在 Canvas 旁边放一个纯色
<div style="width:100px;height:100px;background:#000"></div>，CSS 宽高与 Canvas 的style.width/style.height一致 - 再画一个相同尺寸的黑色矩形到 Canvas 上。如果两者边缘明显不对齐、Canvas 内容显得“软”或“泛白”，大概率是 DPR 未正确处理
- 对文字尤其敏感：用
ctx.font = '16px sans-serif'绘制文本，DPR=1 时清晰锐利，DPR=2/3 且未缩放上下文时，文字会变粗、发虚
微信小程序环境的特殊测试方式
小程序无法用 Chrome DevTools 直接模拟，需换思路：
- 调用
wx.getSystemInfoSync().pixelRatio获取真实 DPR 值，并打印到界面上 - 在开发者工具中，右上角选择“基础库版本”和“设备”（如 iPhone 14、Pixel 7），不同设备预设了对应 DPR
- 真机调试时，在
onReady中打印 DPR 并动态设置 Canvas 宽高，然后截图对比：适配前 vs 适配后文字/图标清晰度 - 重点测海报生成类功能——模糊在分享到朋友圈后会被放大，用户感知极强
