iPad上Canvas图表错位的根本原因是DPR未校准：需将canvas宽高设为CSS尺寸×dpr，并调用ctx.scale(dpr,dpr)，且操作须在DOM挂载和CSS计算完成后执行。
Canvas绘图坐标系和iPad屏幕DPR不匹配导致错位
HTML5图表（尤其是用canvas绘制的）在iPad上导入数据后显示位置偏移，根本原因不是数据本身出错，而是canvas的逻辑像素与设备物理像素没对齐。iPad（特别是带Retina屏的型号）默认DPR（devicePixelRatio）为2或3，但很多图表库初始化canvas时没适配，导致绘制坐标被缩放两次——一次是CSS渲染缩放，一次是ctx.scale()未校准。
- 检查当前DPR：
window.devicePixelRatio，iPad通常返回2或3 - 确保
canvas.width和canvas.height设为CSS宽高 × DPR，而非直接取offsetWidth/offsetHeight - 调用
ctx.scale(dpr, dpr)前，必须先清空画布或重置变换矩阵，否则叠加缩放会加剧错位
ECharts / Chart.js在iPad上加载后坐标偏移的修复步骤
主流图表库默认不自动处理DPR，需手动干预初始化时机和渲染逻辑。以ECharts为例，错位常发生在setOption()后立即渲染，但此时容器尺寸可能未稳定，或resize()未触发。
- 延迟初始化：用
setTimeout(() => chart.resize(), 100)避开iOS WebKit布局抖动 - 监听
resize事件时，加防抖并强制重设devicePixelRatio相关配置 - Chart.js需在创建实例前设置
devicePixelRatio: window.devicePixelRatio || 1，否则chart.canvas的width/height仍按1x计算
用CSS transform缩放图表容器引发的二次错位
有些方案为适配iPad横竖屏，对整个加了transform: scale(0.8)，这会让图表内部坐标系和事件坐标彻底脱节——鼠标/触点位置、tooltip定位、点击热区全偏移。
- 禁用容器级
transform缩放，改用viewportmeta控制或响应式font-size+ rem布局 - 若必须缩放，需同步修正图表库的
getBoundingClientRect()返回值，例如重写ECharts的convertFromPixel逻辑 - 测试触控点：用
event.touches[0].clientX对比chart.convertFromPixel('grid', [x, y])输出，偏差超过10px基本可判定是缩放未对齐
// 示例：修复canvas DPR错位的通用init函数
function initHighDPICanvas(canvas) {
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
ctx.clearRect(0, 0, canvas.width, canvas.height);
return ctx;
}
DPR校准不是“设了就完事”，关键在时机——canvas尺寸重设必须在DOM挂载完成且CSS计算完毕后执行，且不能和图表库自身的resize逻辑冲突。很多问题表面是数据错位，实际是渲染管线里某一层坐标没跟着DPR对齐。
