screen.orientation.change事件监听不到主因是兼容性差，android webview等不支持；应优先用matchmedia配合防抖，辅以orientationchange兜底，并通过screen.orientation.type获取物理朝向。
screen.orientation.addEventListener 为什么监听不到 change？
因为 screen.orientation 的 change 事件只在方向实际变更后触发，但很多设备（尤其是 Android WebView、部分 iOS Safari 版本）根本**不支持该事件**，或者仅在调用 screen.orientation.lock() 后才生效。更常见的情况是：你绑定了监听，但旋转屏幕后回调完全没执行。
实操建议：
- 先检查浏览器兼容性：
screen.orientation在 Chrome 58+、Edge 79+、Firefox 66+ 支持，但 Android WebView 需要 Android 10+ 且启用android:configChanges="orientation|screenSize"才可能稳定工作 - 不要单独依赖它——必须搭配
window.matchMedia或orientationchange做 fallback - 监听前加防御判断：
if ('orientation' in screen && screen.orientation?.addEventListener)
matchMedia('(orientation: portrait)') 怎么避免重复触发？
window.matchMedia 是目前最可靠的方向检测方式，但它每次媒体查询状态变化都会触发回调，而屏幕旋转过程中可能因过渡动画、尺寸抖动导致多次触发（比如竖屏 → 横屏 → 竖屏 → 横屏），造成 UI 反复重绘。
实操建议：
- 用
matchMedia的addListener（旧 API）或addEventListener（新 API），但务必配合防抖：let timer; mql.addEventListener('change', () => { clearTimeout(timer); timer = setTimeout(handleOrientation, 100); }) - 不要只监听
(orientation: portrait)，同时监听(orientation: landscape)并做互斥判断，避免因 CSS 媒体查询延迟导致状态误判 - 首次加载时主动读取：
const isPortrait = mql.matches，别等事件才初始化状态
orientationchange 事件在 iOS 上为什么有时失效？
orientationchange 是 iOS Safari 专属的老接口，它只在 Safari 中原生支持，在 WKWebView 或 PWA 中可能被禁用；而且从 iOS 17.4 起，系统默认关闭了部分传感器权限，导致该事件即使注册了也不触发。
实操建议：
- 仅作为 iOS Safari 的兜底方案，注册前先检测：
'onorientationchange' in window - 不要把它当主逻辑——iOS 上
window.orientation属性也已废弃，返回值不可靠（常为 0 或 undefined） - 若需精确角度（如区分
landscape-primary和landscape-secondary），必须用screen.orientation.type+matchMedia组合判断
怎么拿到真正的设备物理朝向（不是窗口方向）？
网页中所有“方向”监听本质上都是基于 viewport 尺寸或 CSS 媒体查询推断的逻辑方向，和设备陀螺仪/加速度计无关。如果你需要知道手机是正立、倒置、左横、右横（即物理姿态），screen.orientation 的 type 字符串（如 'portrait-primary'）是最接近的答案，但它仍受系统设置影响（比如用户强制锁定竖屏）。
实操建议：
-
screen.orientation.type返回值有四种：'portrait-primary'、'portrait-secondary'、'landscape-primary'、'landscape-secondary'，注意 secondary 不等于“倒过来”，而是指 home 键在上方/右侧的反向布局 - 真要获取物理角度，得用
DeviceOrientationEvent（需用户授权），但它的alpha/beta/gamma值噪声大、校准难，且 iOS 要求页面从安全上下文（HTTPS）启动并用户交互后才允许启用 - 绝大多数业务场景下，用
matchMedia判断宽高比 +screen.orientation.type做二次确认，已经足够稳定
display: minimal-ui 导致 orientation API 权限受限。这些边界情况没法靠单一 API 覆盖，必须分层检测、逐级 fallback。
