screen.orientation.addeventlistener('change') 经常不触发，因该事件仅在设备物理旋转完成且浏览器确认方向稳定后才可能触发，但微信android webview、旧版ios safari、http下的chrome等环境不支持；正确检查需用if ('orientation' in screen && screen.orientation?.addeventlistener)并手动调用回调初始化，且须配合matchmedia防止单点失效。
screen.orientation.addEventListener('change') 为什么经常不触发
因为这个事件根本不是“一注册就听得到”的。它只在用户完成一次物理旋转、且浏览器确认方向已稳定后才可能触发，但前提是：screen.orientation 已被浏览器启用且设备支持——而很多环境压根不满足。比如微信 Android WebView、旧版 iOS Safari（≤16.3）、HTTP 页面下的 Chrome，screen.orientation 对象存在，但 addEventListener('change') 绑定后完全静默；部分安卓 WebView 还要求先调用 screen.orientation.lock() 才肯发事件。
必须加的兼容性判断和初始化逻辑
不能只写 if ('orientation' in screen)，Safari 就会骗你：它返回 true，但 screen.orientation 是 undefined。正确检查方式是：
if ('orientation' in screen && screen.orientation?.addEventListener) {
screen.orientation.addEventListener('change', handleOrientation);
// 立即读一次，避免首次漏判
handleOrientation();
}
注意两点：
– handleOrientation() 必须手动调用一次，否则页面加载时状态为空
– screen.orientation.type 初始可能是 undefined，所以函数里要兜底
监听回调里怎么安全读取方向类型
screen.orientation.type 只有四个合法值：portrait-primary、portrait-secondary、landscape-primary、landscape-secondary。别用 === 'landscape' 这种硬比，它永远不成立。正确做法是：
- 用
type.includes('landscape')或type.includes('portrait')做语义判断 - 需要区分正反向（如游戏倒置）才严格比全字符串
- 不要依赖
screen.orientation.angle，它的值在部分安卓上不可靠，iOS 上基本没用
为什么不能只靠 change 事件，还得配 matchMedia
因为 screen.orientation 的 change 事件在大量真实场景中就是不触发：WebView 不支持、PWA 权限受限、iOS Safari 未获用户交互授权……而 window.matchMedia('(orientation: landscape)') 基于 CSS 渲染层，只要视口宽高比变了就响应，兼容性好得多（Chrome 74+、Firefox 69+、iOS Safari 12.2+）。实操建议：
- 用
matchMedia作为主监听，screen.orientation.change当增强补充 - 两者都加防抖（
setTimeout延迟 100ms），避免旋转过渡动画导致多次触发 - 首次加载必须主动读
mql.matches和screen.orientation?.type，否则初始状态丢失
最易忽略的一点：screen.orientation 的事件不会在页面加载完成时自动就绪——没用户点过屏幕、没触发过任何手势，它大概率连第一次 type 都读不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
