用 HTML 监听设备方向，让网页随你走动感知世界

在移动设备上，你的动作会带来页面的微变化。比如打开导航时，让界面随你的朝向自动旋转，或根据手机倾斜判断是否在行驶，这些交互都能让体验更贴近现实。通过 HTML 与 JavaScript 监听设备方向，你就能在网页里感知到这些物理变化。

为什么要做方向监听

想象你在公交站等车，手机从口袋拿出来时，屏幕朝向改变了；在车上查看路线时，又需要快速旋转页面。这些场景里，方向信息能帮助网页做出更自然的反馈。不只是导航，游戏、健康记录、AR 体验等都能受益于对方向的感知。

基础能力与浏览器支持

现代浏览器原生支持方向相关传感器，但支持程度会因设备而异。方向监听基于设备的方向传感器，返回的是设备的朝向（通常以度数表示，相对于北方的偏移），而不是加速度或姿态矩阵。大部分现代手机和平板均支持，但具体精度与刷新频率以设备和浏览器实现为准。

关键步骤与实现

1. 获取方向传感器

在 JavaScript 中，通过 window.DeviceOrientationEvent 监听设备方向。与页面方向的旋转（CSS 的 transform 旋转）不同，这里返回的是以北方为基准的偏移角度。

window.addEventListener('deviceorientation', (event) => {
  const alpha = event.alpha; // 以北方为基准的偏移，0-360
  const beta = event.beta;   // 偏离垂直面的角度，-90~90
  const gamma = event.gamma; // 偏离水平面的角度，-90~90
  console.log(`朝向：${alpha}, 垂直偏移：${beta}, 水平偏移：${gamma}`);
});

2. 优化使用与权限

大多数设备在首次触发时会弹出权限提示，确保用户授权后再持续监听。监听频率由浏览器决定，你可以通过 requestAnimationFrame 或节流策略控制回调的执行节奏，避免过载。

3. 将方向映射到页面行为

把传感器数据映射到页面交互是关键。例如，根据 beta 和 gamma 的值判断设备是否在行驶，并据此动态调整页面布局或样式，或触发导航的转向提示。

4. 节点移动与方向丢失

在页面滚动、从桌面切换到手机等场景下，设备可能丢失方向数据。通过监听 devicemotion 可以辅助判断设备是否在移动，但注意不要把方向与加速度混为一谈。方向丢失时可短暂停止监听或重置角度。

实战思路：让页面随方向“看”世界

你可以创建一个简单的交互：当用户将手机向右倾斜时，让页面上的“指南针”方向随之转动；当设备水平旋转时，页面标题自动调整为“道路在右”。这种反馈让信息展示与你的视线一致，减少认知负担。

结尾

方向监听为网页交互打开了一扇感知现实的窗。从导航到游戏，从健康到教育，通过将传感器数据转化为页面反馈，能创造出更自然、更贴近日常的体验。掌握这些原理和实践，你就能在自己的项目里做出更聪明的交互设计。