DeviceOrientation事件需用户手势触发并检查权限：Safari需requestPermission()，Chrome要求HTTPS；alpha/beta/gamma分别表示绕z/x/y轴旋转；需滤波缩放后用于CSS transform；真机调试才可靠。
DeviceOrientation 事件监听不到？检查权限和触发时机
Chrome 和 Safari 现在默认不自动启用 DeviceOrientation，必须由用户手势（如点击、触摸）显式触发后才能开始监听。直接在 DOMContentLoaded 里调用 addEventListener("deviceorientation", ...) 大概率没反应。
- 必须先绑定一次用户交互事件（比如
button.addEventListener("click", initGyro)），在回调里再调用requestPermission()（iOS/Safari）或直接监听（Android/Chrome 120+） - Safari 16.4+ 要求调用
DeviceOrientationEvent.requestPermission()并 await 它返回"granted"，否则事件静默丢弃 - Chrome 92+ 对非安全上下文（
http://）完全禁用该 API，务必用https://或localhost
alpha / beta / gamma 值到底代表什么方向？别靠猜
这三个值不是统一的欧拉角，而是设备坐标系相对地理坐标系的偏转量，且各浏览器实现细节有差异：
-
alpha：绕 z 轴（垂直屏幕朝外）旋转，即“指南针”方向，范围 0–360°，但 iOS 可能返回null（需检测） -
beta：绕 x 轴（从左到右横穿屏幕）旋转，即前后倾斜，-180° 到 +180°；手机平放桌面时接近 0°，抬头看屏幕变正，低头变负 -
gamma：绕 y 轴（从上到下纵穿屏幕）旋转，即左右倾斜，-90° 到 +90°；手机竖屏时左右歪动就影响它，横屏时行为会翻转 - 注意：部分安卓机型在横屏模式下
beta和gamma含义会互换，建议用screen.orientation.type判断并做归一化
用 CSS transform 实现平滑陀螺仪转动？别直接套用 raw 值
原始 beta 和 gamma 波动剧烈，直接映射到 rotateX/rotateY 会导致画面抖动。需要滤波和缩放控制。
- 加简单移动平均：用长度为 5 的数组缓存最近 5 次值，取均值（比单次采样稳得多）
- 限制旋转幅度：比如
transform: rotateX(${Math.max(-20, Math.min(20, beta * 0.3))}deg) rotateY(${Math.max(-15, Math.min(15, gamma * 0.4))}deg) - 避免 layout thrashing：把
transform写在 will-change 元素上，并确保目标元素是position: relative或absolute，避免触发布局重排 - 不要用
requestAnimationFrame频繁 setAttribute 改 style —— 直接操作element.style.transform更快
真机调试看不到效果？避开三个典型环境坑
模拟器和桌面 Chrome 的 DeviceOrientation 模拟器功能非常有限，很多行为无法复现，真机调试是唯一可靠路径。
- 微信内置浏览器（iOS）默认禁用
DeviceOrientation，即使授权也返回空值；必须跳转到系统 Safari 打开 - Android WebView（尤其旧版）可能未开启传感器权限，检查 App 是否授予了「身体传感器」权限（不只是位置）
- 某些折叠屏或竖屏优先设备，在展开/旋转过程中会重置 orientation 事件，导致
beta/gamma突变为 0；建议监听screen.orientationchange并重置内部状态
陀螺仪交互真正的难点不在数学或语法，而在于不同硬件+系统+浏览器对同一标准的差异化实现，以及权限链路上那些不报错却静默失效的环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
