DeviceOrientation API 可通过 deviceorientation 事件获取 alpha（偏航角）实现罗盘功能，但需 HTTPS、用户交互触发，iOS 需 requestPermission()；alpha 需滤波、校准（动态基准偏移）、兜底处理，并降级兼容不支持设备。
用 DeviceOrientation API 获取手机方向数据
浏览器原生支持的 deviceorientation 事件能拿到设备相对于地磁场的偏航角（yaw），也就是罗盘需要的核心值——alpha。注意：这个值在 Chrome/Firefox/Safari（iOS 13+）中可用，但必须满足两个前提：页面通过 HTTPS 提供，且用户已主动交互过页面（比如点击、触摸），否则 iOS Safari 会静默禁用传感器。
常见错误是直接监听就以为能拿到数据，结果 alpha 始终为 null 或 0。实操建议：
- 先绑定一个按钮，点击后才调用
window.addEventListener('deviceorientation', ...) - 检查事件对象里是否有
alpha字段，没有则说明权限未触发或设备不支持 - Android Chrome 默认启用，iOS Safari 需要额外请求权限：调用
DeviceMotionEvent.requestPermission()（仅限 iOS 13+，且必须在用户手势回调内执行）
把 alpha 值转成 CSS transform 旋转角度
alpha 是 0–360° 的顺时针方向值（0° 指向正北），但 CSS 的 transform: rotate() 是以元素自身坐标系为基准，且正方向是顺时针——这点刚好匹配，不用反向。但要注意单位和取值范围：
-
alpha可能是null（未授权）、NaN（传感器异常）或负值（某些 Android 厂商实现偏差），必须做兜底处理：const deg = isNaN(alpha) || alpha === null ? 0 : (360 - alpha) % 360 - 别直接写
rotate(alpha + 'deg')，否则指针会随设备轻微抖动；加个简单低通滤波：smoothedDeg = smoothedDeg * 0.7 + deg * 0.3 - 用
transform: rotate(${smoothedDeg}deg)更新指针元素，推荐用Element.style.transform而非 class 切换，避免重排
校准功能怎么加才不鸡肋
纯靠 deviceorientation 的 alpha 值会有磁偏角误差（尤其在室内或靠近金属物时），用户需要手动校准。关键不是“做个按钮”，而是让校准真正生效：
立即学习“前端免费学习笔记（深入）”；
- 点击校准按钮后，立刻记录当前
alpha值作为“当前朝向应为正北”的基准偏移量calibrationOffset - 后续所有显示角度改为：
(deg - calibrationOffset + 360) % 360 - 不要存到 localStorage 就完事——不同场景（比如从室内走到室外）磁环境变化大，校准值有效期很短，建议每次进入罗盘页都重置，或提供“重新校准”显眼入口
- 校准时提示用户水平持机并缓慢转一圈，否则单点校准反而放大误差
兼容旧设备或降级方案怎么设
部分 Android 4.x 或低端机型不支持 deviceorientation，或者只返回 beta/gamma（倾斜角），此时无法实现真罗盘。不能留白或报错，得有 fallback：
- 检测
window.DeviceOrientationEvent是否存在，不存在则显示静态“指南针不可用”提示，并隐藏旋转动画 - 若支持但
alpha长期为null，可尝试监听devicemotion事件，结合加速度计粗略估算方向（精度差，仅作示意） - WebGL 或 Canvas 绘制的指针图建议用 SVG，保证缩放清晰；CSS 动画用
will-change: transform提升性能，避免卡顿
磁传感器数据本身噪声大，没滤波的罗盘转起来像喝醉。真正可用的罗盘，80% 工作量在防抖、校准和兜底，而不是画个箭头再 rotate。
