HTML5动画移动端不流畅、错位、缩放失常的根本原因是viewport配置、canvas像素比、CSS单位混用三者未对齐：1. viewport必须设width=device-width、initial-scale=1.0且user-scalable=no；2. canvas需按devicePixelRatio放大宽高并用CSS缩回视觉尺寸，再ctx.scale(dpr,dpr)；3. CSS动画优先用rem或vmin，禁用em和transform:scale()，改用matrix3d或scaleX/scaleY。
HTML5 动画在移动端不流畅、错位、缩放失常，根本原因不是动画本身写得不好，而是 viewport 配置、canvas 像素比、CSS 单位混用这三处没对齐。
viewport 设置必须带 initial-scale=1.0 且禁用缩放
很多动画在 iOS Safari 上突然变小或位置偏移，是因为缺失或错误的 viewport 元标签。移动端浏览器默认会模拟桌面视口（如 980px 宽），导致 canvas 或 div 动画按错误基准渲染。
正确写法只有一行，且不能省略 user-scalable=no（否则双击缩放会重排布局，动画帧直接跳变）：
注意：width=device-width 不等于“适配”，它只是告诉浏览器用设备物理宽度除以缩放值作为 CSS 像素宽度；真正起作用的是 initial-scale=1.0 —— 它强制将 CSS 像素与设备独立像素对齐。
立即学习“前端免费学习笔记（深入）”；
canvas 动画必须手动处理设备像素比（window.devicePixelRatio）
Canvas 在 Retina 屏上默认用 1:1 渲染，但 CSS 样式仍按 1 个 CSS 像素计算，结果就是模糊、锯齿、尺寸偏差。这不是动画逻辑问题，是绘制上下文没对齐物理像素。
关键步骤只有三步：
- 读取
window.devicePixelRatio，获取设备像素比 - 用该比值放大
canvas.width和canvas.height（注意：这是 DOM 属性，不是 CSS 样式） - 用 CSS 将
canvas缩放到原始视觉尺寸（例如设style="width: 320px; height: 480px;"）
示例代码（省略动画循环）：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
// 设置 canvas 实际绘图分辨率
canvas.width = 320 dpr;
canvas.height = 480 dpr;
// 用 CSS 控制显示尺寸（保持视觉大小不变）
canvas.style.width = '320px';
canvas.style.height = '480px';
// 绘图前缩放上下文，避免手动乘 dpr
ctx.scale(dpr, dpr);
CSS 动画避免用 px，优先用 rem 或 vmin
用 px 写 @keyframes 位移或缩放，在不同 DPR 下表现不一致；用 % 又受限于父容器，容易在 flex/grid 布局中失效。
更可靠的选择：
-
rem：配合根字体动态设置（document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';），适合固定比例 UI -
vmin：基于视口短边的百分比单位，动画位移、旋转半径用它最稳，比如transform: translateX(10vmin) - 绝对不用
em做动画值——它继承自父元素字体大小，嵌套深了极易失控
特别注意：transform: scale() 在 iOS Safari 中有渲染 bug，若需缩放动画，优先用 transform: matrix3d() 或分拆为 scaleX/scaleY 单独控制。
最常被忽略的一点：动画触发时机。不要依赖 DOMContentLoaded 启动 Canvas 动画——此时 devicePixelRatio 可能未就绪，尤其是微信内置浏览器。改用 window.addEventListener('load', ...) 或至少加一层 setTimeout(..., 0) 确保渲染上下文稳定。
