Device Orientation API 通过监听 deviceorientation 事件获取 alpha（绕z轴，0–360°）、beta（绕x轴，−180–180°）、gamma（绕y轴，−90–90°）三个欧拉角实现设备旋转检测，需处理权限、null值、抖动及横竖屏判断。
用 Device Orientation API 检测设备旋转，核心是监听 deviceorientation 事件，读取浏览器提供的欧拉角（alpha、beta、gamma）——它们分别对应绕 z、x、y 轴的旋转角度，单位为度。
监听 deviceorientation 事件获取原始旋转数据
该事件在设备方向变化时触发，返回包含三个关键属性的对象：
- alpha：设备绕 z 轴（垂直屏幕）旋转的角度，范围 0–360°，表示“左右转向”（如手机竖屏时摇头）；
- beta：绕 x 轴（水平横贯屏幕）旋转，范围 −180–180°，反映“前后俯仰”（如抬头看天花板或低头看地板）；
- gamma：绕 y 轴（竖直纵贯屏幕）旋转，范围 −90–90°，对应“左右倾斜”（如手机向左/右歪）。
注意：alpha 在某些 Android 设备上可能因权限或浏览器限制返回 null，需做容错处理；iOS Safari 默认禁用该 API，需用户手动开启“运动与方向”权限（设置 → Safari → 运动与方向）。
区分 portrait 和 landscape 朝向
仅靠 beta/gamma 判断横竖屏更可靠，因为 alpha 易受磁场干扰且不直接反映朝向：
立即学习“Java免费学习笔记（深入）”；
- 竖屏（portrait）：|beta| > 45° 且 |gamma|
- 横屏（landscape）：|gamma| > 45°（明显左右倾斜，常伴随屏幕旋转）；
- 补充判断：结合
window.orientation（已废弃但部分旧环境仍可用）或window.matchMedia('(orientation: landscape)')做交叉验证。
平滑处理与防抖优化
原始事件频率高（可达 60Hz），直接响应易导致卡顿或误判。建议：
- 用
requestAnimationFrame节流，每帧最多处理一次； - 对 beta/gamma 做简单移动平均（如保留最近 3–5 帧值求均值），过滤抖动；
- 设置角度变化阈值（如 delta > 2°）再触发业务逻辑，避免微小晃动触发响应。
兼容性与权限检查
现代 Chrome、Firefox、Safari（iOS 13+）、Edge 均支持，但需满足安全上下文（HTTPS 或 localhost）。启动前检查：
- 用
'ondeviceorientation' in window判断 API 可用性； - 监听
deviceorientation事件后，若首次回调中event.alpha === null，提示用户检查系统方向权限； - 降级方案：无 API 时回退到
resize+screen.orientation（仅反映屏幕方向，不感知物理旋转）。
不复杂但容易忽略细节，关键是理解三个角度的物理含义，再结合场景做合理阈值和节流。
