Ja vaScript 其实没法借助 BOM 直接监听重力感应方向。 要实现这类能力，通常需要使用 DeviceOrientation API 的 accelerationIncludingGra vity 属性，获取包含重力在内的加速度向量（x/y/z）。

这组数值对应的是设备坐标系里的重力方向，因此很适合用于倾斜检测这类场景。

在 Ja vaScript 里，不能单靠 BOM（Browser Object Model）直接监听设备的重力感应方向。

原因很简单。标准的 BOM 接口，比如 window、na vigator、screen，本身不提供重力数据或设备姿态数据。

真正可用的是 DeviceOrientation API。它属于 Web API，并不算 BOM 的一部分。这个 API 会结合设备上的加速度计和陀螺仪，提供与重力相关的信息。

用 DeviceOrientation API 获取重力分量

该 API 通过 deviceorientation 事件返回设备在三维空间中的姿态。

其中，accelerationIncludingGra vity 属性会给出包含重力的加速度向量，单位为 m/s。它是监听“重力感应方向”的最常用方式。

• 需用户主动授权（现代浏览器要求页面为安全上下文，即 HTTPS 或 localhost）
• 事件回调中可获取 event.accelerationIncludingGra vity.x、y、z，分别对应设备坐标系中三个轴的重力分量
• Z 轴通常垂直于屏幕向外；当手机平放桌面时，z ≈ 9.8，x 和 y 接近 0；竖直立起时，y 或 x 显著变化

注意区分 acceleration 和 accelerationIncludingGra vity

acceleration 是纯运动加速度，不包含重力。

accelerationIncludingGra vity 才能反映当前重力方向。因为重力始终作用在设备上，它在各坐标轴上的投影会随设备朝向变化。

• 例如：手机静止斜握时，acceleration 接近 {x: 0, y: 0, z: 0}，但 accelerationIncludingGra vity 会显示非零值，指向“向下”方向在设备坐标系中的分量
• 若需计算重力方向与地面夹角，可用 Math.atan2(Math.sqrt(x + y), z) 近似估算倾斜角

兼容性与权限处理

并非所有浏览器都默认启用该 API。

尤其是 iOS Safari，通常需要用户首次交互（如点击）后才能触发事件。部分 Android 浏览器也可能需要显式请求权限。

• 建议先检测支持性：if (window.DeviceOrientationEvent)
• 监听前可加一次用户手势（如按钮点击）再调用 window.addEventListener('deviceorientation', ...)，提高 iOS 兼容性
• 注意：Chrome 96+ 对未激活页面会暂停该事件，后台标签页中无法持续监听

替代方案：使用 Orientation Sensor（更现代但支持有限）

较新的 Accelerometer 和 Gra vitySensor 属于 Generic Sensor API，也能提供更干净的重力数据。

不过，目前仅 Chromium 内核浏览器（如 Chrome、Edge）部分支持，且需要 HTTPS 与用户许可。

• 示例：const sensor = new Gra vitySensor(); sensor.start(); sensor.onreading = () => { console.log(sensor.x, sensor.y, sensor.z); };
• 优势：数据更稳定、不混入线性加速度；劣势：兼容性差，不能作为生产环境首选

实际使用时还要注意什么

重力方向本质上是设备坐标系下的向量。

如果要映射到现实世界，例如判断手机是否倒置，还需要结合 deviceorientation 的 alpha/beta/gamma，或使用 RotationRate 辅助校准。

但在多数倾斜检测场景中，单纯使用 accelerationIncludingGra vity 就已经足够。

《夸克》非常好用的免费AI浏览器

下载APP查看