HTML5动画怎么做区分PC与手机不同表现_响应式判断与布局指南【指南】

应优先使用 prefers-reduced-motion 媒体查询判断用户动画偏好，而非仅依赖设备类型；它源自系统设置，体现用户真实可访问性需求，css 中需前置重置动画时长与次数，js 中也应监听并跳过非必要动画。

怎么用 window.matchMedia 判断设备类型并切换动画行为

靠 UA 字符串识别设备既不可靠又容易过时，window.matchMedia 是现代、轻量、可维护的方案。它不判断“是不是手机”，而是判断“当前视口是否符合某类媒体查询条件”，更贴合响应式动画的真实需求。

常见错误是写成 window.matchMedia('(max-width: 768px)') 后直接监听，却没考虑横屏手机（可能宽 > 768px）或折叠屏等新场景。

• 推荐用 window.matchMedia('(hover: none) and (pointer: coarse)') 判断触控主设备（绝大多数手机/平板），比单纯看宽度更准确
• PC 端通常匹配 '(hover: hover) and (pointer: fine)'，可触发 hover 动画、鼠标跟随等效果
• 监听需调用 mql.addEventListener('change', handler)（注意不是 addListener，后者已废弃）
• 首次判断别忘手动执行一次 handler(mql)，否则初始状态可能错位

CSS @media 里怎么控制 @keyframes 的启用与禁用

CSS 动画本身不能在媒体查询里定义 @keyframes，但可以控制它的应用——即通过媒体查询开关 animation 属性值。

典型误操作：在手机媒体查询里写 animation: none，结果发现动画仍闪一下才停。这是因为 none 不会清空已有动画状态，必须用 animation: initial 或显式设为空值。

立即学习“前端免费学习笔记（深入）”；

• PC 端启用复杂动画：animation: slideIn 0.4s ease-out;
• 移动端降级为平滑过渡：animation: none; transition: transform 0.2s, opacity 0.2s;
• 若需彻底禁用（比如省电模式）：animation: none !important; animation-play-state: paused !important;
• 注意：部分安卓 webview 对 animation-play-state 支持不稳定，建议优先用 animation: none + transition 替代

用 requestAnimationFrame 做 JS 动画时如何适配不同刷新率与交互方式

PC 显示器多为 60Hz，高端笔记本/显示器可达 120Hz+；而多数手机屏幕虽标称 60Hz，实际触控响应和滚动帧率波动大。硬编码 setTimeout(..., 16) 会导致手机端卡顿、PC 端浪费性能。

另一个常被忽略的点：触控设备上用户手势（如快速 swipe）会打断 requestAnimationFrame 流程，若没做 cancel，动画残留会造成视觉撕裂。

• 始终用 let rafId = requestAnimationFrame(loop)，并在交互开始前调用 cancelAnimationFrame(rafId)
• 对触控设备，监听 touchstart 和 scroll 事件，暂停动画逻辑；松手后延时 100ms 再恢复（避免误触发）
• 需要逐帧控制节奏时，用 performance.now() 计算真实 delta 时间，别依赖帧数假设
• 避免在 rAF 回调里频繁读取 offsetTop 或 getBoundingClientRect()，尤其在移动端，这会强制同步布局计算

为什么 prefers-reduced-motion 比设备判断更重要

很多开发者花大力气区分 PC/手机，却忽略了一个更关键的信号：(prefers-reduced-motion: reduce)。它来自系统设置，代表用户明确表达了对动画的排斥——无论设备类型、无论屏幕大小。

这个媒体查询优先级高于设备类型判断。比如一个开着“减少运动”选项的 macBook，你给它加了炫酷 hover 动画，就违背了可访问性原则，也违反 WCAG 2.1 标准。

• 务必在 CSS 中前置定义：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
• JS 中也可监听：window.matchMedia('(prefers-reduced-motion: reduce)').matches === true，此时应跳过所有非必要动画逻辑
• 注意：ios safari 直到 iOS 13 才支持该查询，旧版本需 fallback 到 UA 或用户设置偏好存储

设备尺寸和输入方式只是表象，用户的实际偏好和系统能力才是动画是否该出现的决定性因素。漏掉 prefers-reduced-motion 处理，再精细的 PC/手机区分都可能变成无障碍缺陷。