JavaScript检测手机姿态主要依靠DeviceOrientation API（获取alpha/beta/gamma欧拉角）和DeviceMotion API（获取加速度与旋转速率），但需HTTPS环境及用户手势触发，且要注意alpha可能为null、iOS Safari兼容性限制及AR场景应优先使用WebXR API。
JavaScript 中检测手机姿态变化主要依靠 DeviceOrientation API 和 DeviceMotion API，它们能获取设备在三维空间中的朝向（alpha/beta/gamma）和加速度/旋转速率。但要注意：现代浏览器大多要求页面通过 HTTPS 提供，且需用户手势触发（如点击、触摸）后才能启用这些 API。
获取设备方向（orientation）：监听 deviceorientation 事件
该事件提供设备相对于地球坐标系的欧拉角：
- alpha：绕 z 轴旋转（指南针方向，0° 指北，顺时针增加）；
- beta：绕 x 轴旋转（前后倾斜，-180°~180°，平放时为 0°，抬头为正）；
- gamma：绕 y 轴旋转（左右倾斜，-90°~90°，平放时为 0°，右倾为正）。
示例代码（需用户交互后启用）：
let isListening = false;document.body.addEventListener('click', () => { if (!isListening) { window.addEventListener('deviceorientation', handleOrientation); isListening = true; } });
function handleOrientation(event) { console.log({ alpha: event.alpha, // 方位角（可能为 null，需检查） beta: event.beta, // 前后倾斜 gamma: event.gamma // 左右倾斜 }); }
⚠️ 注意：alpha 在某些 Android 设备或隐私模式下可能为 null，建议先判断 event.alpha !== null 再使用。
立即学习“Java免费学习笔记（深入）”；
检测运动状态（motion）：监听 devicemotion 事件
它提供更底层的传感器数据，适合做摇晃检测、步数估算等：
- acceleration：去除重力后的线性加速度（x/y/z）；
- accelerationIncludingGravity：含重力的加速度；
- rotationRate：绕三轴的角速度（alpha/beta/gamma，单位：deg/s）。
例如检测“摇一摇”：
let lastTime = 0; const THRESHOLD = 25; // 加速度变化阈值function handleMotion(event) { const now = Date.now(); const timeDelta = now - lastTime; lastTime = now;
const acc = event.accelerationIncludingGravity; const speed = Math.sqrt(acc.x2 + acc.y2 + acc.z**2);
if (speed > THRESHOLD && timeDelta > 300) { console.log('检测到一次有效摇晃'); // 触发刷新、切换、拍照等操作 } }
document.body.addEventListener('click', () => { window.addEventListener('devicemotion', handleMotion); });
响应姿态变化的实用技巧
-
防抖与节流：事件触发频繁（可达 60Hz），用
requestAnimationFrame或简单时间间隔限制处理频率； - 校准初始姿态：首次获取方向后保存为“参考姿态”，后续用相对差值做逻辑（比如游戏中的零点校准）；
-
兼容性兜底：iOS Safari 对
deviceorientation默认禁用 alpha，需在Info.plist中配置（仅限 PWA 或 WebView 场景）； - 权限提示友好化：首次请求前用文字引导用户“点击屏幕以启用体感控制”。
不推荐直接依赖 orientation 的场景
比如需要精确朝向的 AR 应用，deviceorientation 精度有限且易受磁场干扰。此时应优先考虑 WebXR API（如 XRSession）配合陀螺仪+视觉定位，它更稳定、有坐标系对齐能力，也支持 WebXR Viewer 或 Chrome on Android。
基本上就这些。用好 deviceorientation 和 devicemotion，就能让网页真正“感知”用户怎么拿手机——不复杂但容易忽略初始化时机和权限逻辑。
