用 CSS 的 transform: rotate() 驱动 .needle 元素，结合 DeviceOrientation API 的 alpha 值实现平滑转动；需归一化角度、防抖更新、首次交互后监听，并用 transition 保证动画流畅，桌面端可降级为拖拽或滑块控制。
怎么用 CSS 实现一个能实时转动的指南针仪表盘
纯 HTML + CSS + JavaScript 就能做出响应式、平滑转动的指南针，不需要 Canvas 或第三方库。核心是用 transform: rotate() 驱动指针，再通过 DeviceOrientation API 拿到设备的 alpha（绕 z 轴旋转，即面向方向）值。
注意：alpha 在 iOS Safari 和 Android Chrome 上行为一致，但默认范围是 0–360°，而部分安卓旧 WebView 返回的是 -180–180°，需归一化处理。
- 用
<div class="compass"><div class="needle"></div></div>结构，.needle设为绝对定位居中，宽高适中（如 8px × 60px） -
.compass设置position: relative; width: 200px; height: 200px; border-radius: 50%;，加背景刻度图或文字（N/E/S/W） - 监听
deviceorientation事件，取event.alpha；若为null（比如桌面浏览器没权限），fallback 到手动输入或固定值 - 设置
.needle.style.transform = `rotate(${alpha}deg)`，记得加transition: transform 0.3s ease-out防止突跳
为什么 alpha 值会跳变或卡死
常见于 iOS Safari 后台切回、横竖屏切换后，或用户未触发权限请求就直接监听。iOS 要求首次交互（如点击按钮）后才能启用 DeviceOrientation，否则 alpha 恒为 null。
- 必须在用户手势（
click/touchstart）回调里调用EventTarget.addEventListener('deviceorientation', ...) - 不要在页面加载时立刻监听，否则 iOS 下静默失败，且控制台无报错
- 检测
alpha是否有效：用typeof event.alpha === 'number' && !isNaN(event.alpha)，避免 NaN 导致 transform 错误 - 某些安卓机型（如华为 EMUI）在省电模式下会降频上报，可加防抖：只在
Math.abs(deltaAlpha) > 2时更新 DOM
如何让指南针在桌面浏览器也能“模拟转动”
桌面端没有 deviceorientation，但你可以用键盘或鼠标拖拽控制角度，方便调试和演示。
立即学习“前端免费学习笔记（深入）”；
- 加一个
<input type="range" min="0" max="360" value="0">，绑定input事件实时更新.needle的rotate - 或者监听
mousedown → mousemove，计算鼠标相对于圆心的角度：用Math.atan2(dy, dx) * 180 / Math.PI + 90得到 0–360° 值 - 注意：桌面模拟时别覆盖掉移动端逻辑，用
'ondeviceorientation' in window做环境判断 - 加个状态提示文字，如
<small id="compass-status">Using device sensor</small>，便于排查
刻度文字（N/E/S/W）对不齐？CSS 定位怎么算角度
四个主方向不是简单写死 top/left，得用三角函数把极坐标转成直角坐标，否则旋转容器时文字会跟着歪。
- 把
.compass设为position: relative，所有刻度<span class="label">N</span>用position: absolute - N 在 0°：x = 0, y = -radius →
top: 0; left: 50%; transform: translateX(-50%) - E 在 90°：x = radius, y = 0 →
top: 50%; left: 100%; transform: translate(-100%, -50%) - 同理 S（180°）、W（270°）按对应象限设
top/left和transform - 如果用 SVG 刻度，更稳：把文字放在
<circle cx="100" cy="100" r="80"/>的路径上，用textPath自动对齐
真机调试时最容易忽略的是：iOS 16+ 要求网站声明 Permissions-Policy: accelerometer=(), gyroscope=(), magnetometer=() 才能启用传感器，否则 alpha 永远是 null —— 这个 header 得后端配，前端改不了。
