根本原因是ios safari对devicepixelratio处理更激进且默认启用高分辨率渲染，而android chrome部分版本忽略css缩放与绘制缓冲区分离逻辑，导致坐标计算偏移。
HTML5 <canvas></canvas> 坐标系在 iOS 和 Android 上为何不一致
根本原因不是 HTML5 本身有问题，而是 iOS Safari（尤其是旧版 WebKit）对 <canvas></canvas> 的 devicePixelRatio 处理更激进，且默认启用高分辨率渲染；Android Chrome 虽也支持，但部分机型或 WebView 版本会忽略 canvas 的 CSS 缩放与实际绘制缓冲区的分离逻辑。结果就是：同一段用 getBoundingClientRect() + event.clientX/Y 计算点击坐标的代码，在 iPhone 上常偏移 2x，在中低端安卓机上却看似“正常”——其实是没正确缩放绘制缓冲区导致的假象。
统一获取点击位置的可靠写法（绕过设备差异）
别依赖 event.clientX/Y 直接减 canvas.getBoundingClientRect()，要显式补偿 devicePixelRatio 并对齐 canvas 的真实绘图缓冲尺寸：
- 先用
canvas.width/canvas.height读取 canvas 的「绘图缓冲像素」（即getContext('2d').canvas.width），不是 CSS 宽高 - 再用
canvas.clientWidth/canvas.clientHeight获取「CSS 渲染尺寸」 - 计算缩放比：
const ratio = canvas.width / canvas.clientWidth（这个比值才是你该用的，比window.devicePixelRatio更准） - 坐标转换时：
const x = (e.clientX - rect.left) * ratio，y同理
注意：必须在 canvas 绘制前就设置好 width/height 属性（内联或 JS 赋值），不能只靠 CSS 拉伸，否则 ratio 会是 1，iOS 就彻底错位。
CSS 弹性布局下 getBoundingClientRect() 返回值不准怎么办
当 canvas 父容器用了 flex 或 transform（比如 scale(0.8)），getBoundingClientRect() 仍返回视口坐标，但 canvas 内部坐标系已受干扰。此时不能只靠它定位：
立即学习“前端免费学习笔记（深入）”；
- 给 canvas 加
style="transform: translateZ(0)"强制创建独立层，减少父级 transform 的影响 - 若父容器有
padding或border，getBoundingClientRect().left包含它们，但 canvas 内部原点 (0,0) 是内容区左上角——需额外减去parseFloat(getComputedStyle(canvas).paddingLeft) - 更稳的做法：用
canvas.offsetParent逐级向上累加offsetLeft/Top，避开getBoundingClientRect()的渲染管线干扰
WebView 场景下 iOS WKWebView 和安卓 X5/X5 内核的兼容补丁
Hybrid App 中，iOS 的 WKWebView 默认禁用 devicePixelRatio 修正，安卓 X5（腾讯）内核则可能把 canvas.width 自动设为 clientWidth * window.devicePixelRatio，造成双端初始值不同：
- 初始化 canvas 时强制重置：
canvas.width = canvas.clientWidth * window.devicePixelRatio;→ 错！应统一用canvas.width = canvas.clientWidth * (window.devicePixelRatio || 1);，再手动保存const actualRatio = canvas.width / canvas.clientWidth; - iOS 15+ 有 bug：
canvas.toDataURL()导出图会自带 2x 缩放，但坐标计算不受影响；如需截图匹配点击位置，导出前先用ctx.scale(0.5, 0.5)临时缩放画布 - 真机调试时，用
console.log({ client: canvas.clientWidth, width: canvas.width, dpr: window.devicePixelRatio })对比两端输出，比猜更有效
最易被忽略的一点：canvas 的 width/height 属性一旦被 JS 修改，就会清空当前绘图内容——所以缩放适配逻辑必须放在所有绘制操作之前，且只执行一次。
