HTML5转APP后DeviceMotion事件失效主因是权限未授权或事件未透传：需在容器配置传感器权限、原生层申请、JS调用requestPermission（iOS必需用户手势触发），再合理滤波防误触。
HTML5 转 APP 后，DeviceMotion 和 DeviceOrientation 事件在多数 WebView 容器中默认被禁用或受限——不是代码写错，而是容器没授权传感器权限或没透传底层事件。
WebView 必须开启传感器权限并启用事件透传
很多打包工具（如 Cordova、Capacitor、uni-app 或原生 WebView 封装）默认不开放加速度计访问。即使页面写了 window.addEventListener('devicemotion', ...)，也收不到数据。
- Cordova：需安装
cordova-plugin-device-motion，并在config.xml中确认<feature name="http://api.phonegap.com/1.0/device"></feature>存在 - Capacitor：需调用
Permissions.requestPermission('accelerometer')，再用Accelerometer.addListener（注意：不是直接监听 DOM 事件） - uni-app：使用
uni.onAccelerometerChange，但必须在 manifest.json 中勾选「加速度传感器」权限，iOS 还需在Info.plist添加NSMotionUsageDescription - 纯原生 WebView（Android）：需在
WebSettings中启用setAllowContentAccess(true)和setDomStorageEnabled(true)，并重写onRequestPermissionsResult处理运行时权限
摇一摇逻辑不能只靠 devicemotion raw 数据
直接监听 devicemotion 的 accelerationIncludingGravity 容易误触发：手机放桌上轻微震动、走路颠簸、甚至键盘弹起都可能凑够阈值。真“摇一摇”得做滤波和状态判断。
Web Accessibility (WCAG 2 AA))
下载
将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。
- 推荐用位移变化率（即加速度的模长变化）而非绝对值：计算
Math.sqrt(x*x + y*y + z*z)，再与上一次值比较差值 - 加入时间窗口限制：连续 300ms 内峰值超过 15 m/s² 且有至少两次方向反转（避免单向甩动）
- 安卓低端机常见问题：
devicemotion触发频率不稳定，建议用requestAnimationFrame节流采样，别依赖事件自然频率 - 示例关键判断片段：
let lastAcc = 0;<br>let shakeCount = 0;<br>window.addEventListener('devicemotion', e => {<br> const acc = Math.sqrt(e.acceleration.x**2 + e.acceleration.y**2 + e.acceleration.z**2);<br> if (acc - lastAcc > 12 && Date.now() - lastTime < 300) {<br> shakeCount++;<br> if (shakeCount >= 2) { /* 触发摇一摇 */ }<br> }<br> lastAcc = acc;<br> lastTime = Date.now();<br>});
iOS WKWebView 下 devicemotion 默认不工作
WKWebView 从 iOS 12.2 开始要求显式声明传感器许可，且仅在用户手势交互（如点击）后首次调用才可激活——这是 Apple 的隐私策略，绕不过。
立即学习“前端免费学习笔记（深入）”；
- 必须先让用户点一次屏幕（哪怕是个「开始体验」按钮），再在回调里调用
DeviceMotionEvent.requestPermission() - 该方法返回 Promise，需 await 并检查是否为
'granted'；拒绝后无法再次弹窗，只能引导用户去系统设置手动开启 - uni-app / Taro 等框架封装层可能隐藏了这个步骤，要查它们的源码是否已自动处理
requestPermission - 未授权时控制台会报错：
NotAllowedError: Permission denied，而不是静默失败
真正卡住的往往不是算法，而是权限链路没走通：从 manifest 配置 → 原生层申请 → JS 层主动请求 → 用户点击授权 → 事件监听挂载，任一环断开都会让 devicemotion 彻底静音。调试时优先抓 console.error 和原生日志，别急着改阈值。
