摇一摇功能需用javascript监听devicemotionevent事件实现，依赖移动端加速度传感器，ios 13+须用户手势触发requestpermission()权限申请，通过计算加速度向量变化率（非瞬时值）并设阈值与防抖来准确识别有效摇动。
摇一摇功能依赖 DeviceMotion 事件，不是 HTML 标签能直接实现的
HTML 本身没有 shake 标签或原生属性。所谓“H5 摇一摇”，本质是监听手机加速度传感器数据，判断是否符合“突然加速→快速回弹”的物理特征。必须用 JavaScript 配合 DeviceMotionEvent，且只在移动端（iOS Safari、Android Chrome 等）有效，桌面浏览器基本不支持或需手动开启调试模式。
常见错误现象：deviceorientation 事件被误用（它只报方向，不报加速度）、devicemotion 未请求权限导致 iOS 13+ 上静默失败、未处理 requestPermission 兼容性直接报错。
- iOS 13+ 必须显式调用
DeviceMotionEvent.requestPermission()，且只能在用户手势（如点击）回调中触发 - Android 大部分版本默认允许，但 Chrome 92+ 也开始要求同源 HTTPS + 用户交互后才启用传感器
- 监听前务必检查
window.DeviceMotionEvent是否存在，避免低版本 WebView 报ReferenceError
如何正确注册并过滤有效摇动信号
原始 accelerationIncludingGravity 数据包含重力分量，直接比对绝对值会误触发（比如手机平放时 z 轴≈9.8）。真正要检测的是加速度变化率（即“抖动强度”），而不是瞬时值。
实操建议：缓存最近 3～5 帧的加速度向量，计算欧氏距离差值的均值，超过阈值（如 20～30）再判定为一次有效摇动。避免单帧噪声干扰。
let lastAcc = { x: 0, y: 0, z: 0 };
let shakeThreshold = 25;
window.addEventListener('devicemotion', (e) => {
const acc = e.accelerationIncludingGravity;
const diff = Math.sqrt(
Math.pow(acc.x - lastAcc.x, 2) +
Math.pow(acc.y - lastAcc.y, 2) +
Math.pow(acc.z - lastAcc.z, 2)
);
if (diff > shakeThreshold) {
console.log('shaked!');
// 触发业务逻辑，如抽奖、刷新
}
lastAcc = acc;
});
- 别用
e.acceleration（不含重力），iOS 下常为空，兼容性差 - 阈值
shakeThreshold需实机调试：太小易误触，太大难触发；建议从 20 开始调 - 触发后加防抖（如 1s 内忽略后续信号），否则连续晃动可能触发多次
iOS 13+ 权限申请必须由用户手势触发，不能自动执行
在 iOS Safari 中，若未在用户点击/触摸回调里调用 DeviceMotionEvent.requestPermission()，devicemotion 事件将完全静默——既不报错，也不触发，debugger 里也看不到事件流，这是最常被卡住的点。
正确写法是：先放一个按钮，点击后请求权限，成功后再绑定事件。不能 onload 就 request，也不能靠 setTimeout 延迟模拟用户行为。
document.getElementById('startBtn').addEventListener('click', () => {
if (typeof DeviceMotionEvent.requestPermission === 'function') {
DeviceMotionEvent.requestPermission()
.then(permissionState => {
if (permissionState === 'granted') {
window.addEventListener('devicemotion', handleShake);
}
})
.catch(console.error);
} else {
// Android 或老版本，直接监听
window.addEventListener('devicemotion', handleShake);
}
});
-
requestPermission()返回 Promise，必须用then处理，不能只写回调函数 - 权限状态可能是
granted、denied或prompt，需区分处理（如denied可提示用户手动开启） - Chrome for Android 目前仍无需此步骤，但未来可能跟进，建议统一走权限检查流程
真机测试时要注意传感器采样频率和电池优化干扰
部分安卓厂商（如华为、小米）系统级省电策略会限制后台页面的传感器采样频率，甚至暂停 devicemotion 事件。用户切到其他 App 再切回来，事件可能已停止触发，但不会抛错。
解决方案不是加轮询，而是监听 visibilitychange，在页面重新可见时尝试重新绑定事件（注意避免重复绑定）。
- 不要依赖高频率采样（如期望 60fps），实际稳定输出多为 10～30fps，按帧差计算比按时间间隔更可靠
- 某些低端 Android 机型返回的加速度单位不一致（m/s² vs g），但
accelerationIncludingGravity在标准实现中单位统一为 m/s² - 微信内置浏览器（X5 内核）对
devicemotion支持不稳定，建议降级为点击触发，或用weixinjsbridge检测环境后分流
摇一摇真正的难点不在代码几行，而在于跨设备、跨系统、跨运行环境的传感器行为差异。写完逻辑后，至少要在 iOS（Safari/微信）、Android（Chrome/微信/QQ）三类环境各测两台真机，才能确认是否真的“摇得动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
