移动端图表形变主因是渲染环境不稳：viewport错、根字号跳、容器截断；须锁定视口、确保容器可控、保障坐标系单位可信，真机验证才能确认是否真实不变形。
移动端图表坐标系形变，本质不是图表库的问题，而是页面底层渲染环境没稳住——viewport错、根字号跳、容器尺寸被截断，图表再精准也会被“挤歪”。关键在三件事：视口锁定、容器可控、坐标系单位可信。
viewport必须写对且放最前
图表依赖精确的像素映射（比如 SVG 的 viewBox 或 Canvas 的 width/height），一旦 viewport 缺失或错误，整个坐标系就漂移：
- ✅ 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，且放在最顶部，早于所有 CSS 和 JS - ❌ 禁止只写
width=device-width：iOS Safari 会默认以 980px 渲染再缩放，导致 canvas 像素比错乱、SVG viewBox 被二次缩放 - ❌ 禁止硬编码
width=375：横屏、折叠屏、平板下直接崩，坐标轴比例失真
图表容器不能被“意外压缩”
很多形变其实来自父容器塌陷或 overflow 截断，尤其 flex / grid 布局中：
- 给图表外层容器设明确
width: 100%; height: 400px;或min-height，避免高度由内容撑开导致重绘抖动 - 若容器在 flex 项里，老 iOS（≤12）会忽略子元素
min-width，导致 SVG 或 canvas 被压扁 → 加flex-shrink: 0或width: max-content - 禁用
overflow: hidden盲盖：它可能裁掉坐标轴刻度、图例或 tooltip 边框，看起来像“形变”，实为视觉遮挡
用设备无关单位定义坐标系基准
Canvas、SVG、ECharts、Chart.js 都依赖 CSS 像素与逻辑像素对齐。固定 px 容易在 DPR=2/3 屏上模糊或错位：
- Canvas 绘图前，用
canvas.width = canvas.clientWidth * window.devicePixelRatio校准画布物理分辨率 - SVG 推荐用
viewBox="0 0 600 400"+width="100%" height="auto"，不设固定 px 尺寸 - ECharts / Chart.js 中，禁用
responsive: false；开启maintainAspectRatio: false并配合resizeDelay: 100防抖，避免横竖屏切换时坐标轴拉伸 - 所有坐标轴文字、刻度线、网格线，统一用
rem或em，根字号用内联 calc：html { font-size: calc(100vw / 375 * 14px); }（设计稿按 375px 宽）
真机验证坐标系是否真实不变形
模拟器看不出问题，但真机会暴露：
- iOS Safari：打开开发者工具 → “Elements” 查看 SVG 的
getBBox()或 Canvas 的offsetWidth/offsetHeight，对比 clientWidth 是否一致 - 安卓微信内置浏览器：用
window.getComputedStyle(el).width检查容器计算宽度是否等于预期（如 375px），若显示375px但实际渲染只有 320px，说明 viewport 或字体缩放干扰了布局流 - 双指缩放后立即查看图表：若坐标轴文字变模糊、点位偏移，说明 canvas 未响应 DPR 变化或 SVG 用了
px固定宽高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
