移动端动画适配需三步：①加viewport标签设width=device-width和initial-scale=1.0；②动画容器用vw/vh+max-width/max-height；③Canvas需监听resize重置width/height并乘devicePixelRatio。
用 viewport 元标签控制初始缩放
不加这个，移动端动画会默认按 980px 宽度渲染，导致内容被压缩或出现横向滚动条。必须在 中声明：
注意三点：
• width=device-width 让视口宽度匹配设备物理宽度（不是 CSS 像素）
• initial-scale=1.0 防止 iOS Safari 自动缩放文字破坏动画比例
• user-scalable=no 可选，但动画类页面建议禁用双指缩放，避免布局错位
动画容器用 vw/vh 而非固定像素
写死 width: 300px 或 height: 200px 是自适应失败的主因。改用视口单位能随屏幕等比缩放：
.anim-container {
width: 80vw;
height: 60vh;
max-width: 640px;
max-height: 480px;
}
关键细节：
• vw/vh 基于视口尺寸，不是父元素，适合全屏动画容器
• 必须加 max-width/max-height 限制桌面端过大尺寸，否则大屏上动画可能撑满整个屏幕失去焦点
• 不要对 transform 动画里的数值（如 translateX(100px)）也用 vw，浏览器不支持单位混用
立即学习“前端免费学习笔记（深入）”；
Canvas 动画需监听 window.resize 并重设 canvas.width/height
Canvas 是位图，style.width 缩放只会拉伸失真，必须重置其内部绘图缓冲区尺寸：
function resizeCanvas() {
const canvas = document.getElementById('myCanvas');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // 初始化执行一次
常见错误：
• 只改 canvas.style.width，没动 canvas.width → 动画模糊、坐标偏移
• 忘记初始化调用 resizeCanvas() → 首屏加载时尺寸错误
• 在 requestAnimationFrame 里反复调用 resizeCanvas → 性能暴跌
CSS 动画用 transform: scale() 配合媒体查询兜底
纯 CSS 动画（如 @keyframes）本身不响应式，需靠容器缩放和断点控制：
@media (max-width: 768px) {
.anim-item {
transform: scale(0.8);
}
}
@media (min-width: 1200px) {
.anim-item {
transform: scale(1.2);
}
}
注意事项：
• scale() 要作用在动画元素本身，而非父容器，否则会连带动画轨迹一起缩放变形
• 避免在 @keyframes 里写 scale(0.5) 等绝对值，应统一用容器级缩放控制
• 小屏下慎用 scale(0.5)，可能让文字小于 12px 导致可读性崩坏
devicePixelRatio 补偿——高 DPI 屏幕下只设 clientWidth 会导致动画模糊，需要乘以 window.devicePixelRatio 再赋值给 canvas.width。 
