需先通过用户手势调用 DeviceMotionEvent.requestPermission() 获取权限，再监听 devicemotion 事件，计算加速度模值并检测其短时剧烈变化（静止→跃升→回落→静止）以准确识别摇晃，避免单轴误判。
如何用 DeviceMotion API 检测手机摇晃动作
HTML5 本身没有“摇一摇”这个功能，但可以通过 DeviceMotionEvent 监听设备加速度变化，再结合算法判断是否构成一次有效摇晃。关键不是监听“摇”，而是识别加速度模值的短时剧烈变化。
常见错误是直接监听 acceleration.x 单轴突变——这会导致误触（比如快速抬手、走路颠簸都可能触发）。真正稳定的做法是计算三维加速度的合模：Math.sqrt(x*x + y*y + z*z)，再检测它是否在短时间内（如 300ms 内）从静止状态跃升又回落。
- 必须先由用户手势（如点击、touchstart）触发
requestPermission()（iOS 13+ / Safari 14.1+ 强制要求） - Android Chrome 一般无需权限，但需确保页面是 HTTPS 或 localhost
- 避免在页面加载完成就立即监听，应等用户交互后才调用
window.addEventListener('devicemotion', ...) - 记得节流：用
setTimeout或时间戳控制处理频率，否则高频事件会卡顿
requestPermission() 权限申请怎么写才有效
在 iOS 上，DeviceMotionEvent 默认被禁用，不显式申请就会静默失败——连 console.log 都不会触发。而且 requestPermission() 只能在用户手势回调中调用，不能放在 DOMContentLoaded 里。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.body.addEventListener('click', async () => {
if (typeof DeviceMotionEvent.requestPermission === 'function') {
try {
const permission = await DeviceMotionEvent.requestPermission();
if (permission === 'granted') {
window.addEventListener('devicemotion', handleShake);
}
} catch (e) {
console.warn('摇晃权限被拒绝', e);
}
}
});
注意：requestPermission() 是一次性操作，拒绝后再次调用不会弹窗；用户需手动去系统设置开启“运动与健身”权限（iOS）或“身体传感器”（部分 Android）。
摇晃判定逻辑怎么写才不容易误触发
单纯看加速度峰值容易把走路、点击桌面甚至翻转手机当成摇晃。核心是识别“瞬态冲击”：一段静止 → 短时剧烈变化 → 快速回落 → 回到静止。
- 记录上一次加速度模值和对应时间戳
- 只在当前模值 > 阈值（如
20，单位 m/s²）且与上次静止状态间隔 - 起始后持续采样 500ms 内，若模值回落到
5以下并维持 100ms，才认定为一次有效摇晃 - 两次摇晃至少间隔 800ms，防连续抖动误判
阈值不是固定值：低端安卓机传感器噪声大，建议初始设 15；iPhone 可设 22。上线后最好支持动态调整或用户自定义。
兼容性与 fallback 怎么处理
老版 Android（DeviceMotionEvent；部分 Android WebView 会返回全零加速度。别假设它一定可用。
- 用
'ondevicemotion' in window或typeof DeviceMotionEvent !== 'undefined'做基础检测 - 监听后 1 秒内没收到任何事件，或连续 5 次
event.acceleration全为null，就视为不可用 - 降级方案可以是：显示“请轻点屏幕模拟摇晃”按钮，或改用长按+左右滑动等替代交互
- 不要在不支持的环境里静默失败——给用户明确提示比假装运行更可靠
实际项目里最容易被忽略的是权限请求时机和静默失败的兜底。很多团队测 iOS 时只在 Safari 里点一下就过了，结果上架后发现微信/钉钉容器里完全不工作——因为它们根本不暴露 requestPermission 方法，也无权弹窗。
