答案：JavaScript通过DeviceOrientationEvent和DeviceMotionEvent获取设备方向与运动数据，需HTTPS、用户交互触发及权限请求，注意浏览器差异与数据平滑处理。
JavaScript 可以通过浏览器的 Sensor APIs 采集设备的方向与运动数据，适用于支持这些功能的现代移动设备。这类数据常用于体感控制、游戏、AR 应用或用户交互分析。核心接口包括 DeviceOrientationEvent 和 DeviceMotionEvent，也可使用更新的 Generic Sensor API（部分浏览器支持）。
设备方向：DeviceOrientationEvent
该事件提供设备相对于地球坐标系的朝向信息，包含三个角度值（单位为度）：
- alpha：绕 Z 轴旋转（设备顶部指向地理北方向的偏航角）
- beta：绕 X 轴旋转（设备前后倾斜，范围 -180 到 180）
- gamma：绕 Y 轴旋转（设备左右倾斜，范围 -90 到 90）
监听方式：
window.addEventListener('deviceorientation', (event) => {const { alpha, beta, gamma } = event;
console.log(`方向: α=${alpha}, β=${beta}, γ=${gamma}`);
});
设备运动：DeviceMotionEvent
该事件提供设备的加速度和旋转速率数据：
立即学习“Java免费学习笔记（深入）”；
- acceleration：X/Y/Z 三轴加速度（含重力影响）
- accelerationIncludingGravity：包含重力的加速度（旧设备常用）
- rotationRate：α/β/γ 三轴旋转角速度（度/秒）
- interval：数据采集的时间间隔（毫秒）
监听方式：
window.addEventListener('devicemotion', (event) => {const { x, y, z } = event.acceleration || {};
const { alpha, beta, gamma } = event.rotationRate || {};
if (x !== null) console.log(`加速度: X=${x}, Y=${y}, Z=${z}`);
if (alpha !== null) console.log(`角速度: α=${alpha}, β=${beta}, γ=${gamma}`);
});
权限与兼容性注意事项
出于安全和隐私考虑，传感器访问需满足以下条件：
- 页面必须通过 HTTPS 协议加载
- 部分浏览器（如 Safari）要求用户主动触发（如点击）后才能启用传感器
- 某些安卓浏览器可能不支持 acceleration（不含重力），仅提供 accelerationIncludingGravity
- 桌面浏览器通常不支持此类事件
建议添加权限检测和用户提示：
if (typeof DeviceOrientationEvent !== 'undefined' &&DeviceOrientationEvent.requestPermission) {
// iOS 13+ 需要请求权限
document.querySelector('button').addEventListener('click', async () => {
const permission = await DeviceOrientationEvent.requestPermission();
if (permission === 'granted') {
window.addEventListener('deviceorientation', handleOrientation);
}
});
}
基本上就这些。只要注意权限处理和浏览器差异，就能在移动端有效获取设备方向与运动数据。实际应用中建议做数据平滑处理，并结合 requestAnimationFrame 实现流畅响应。
