现代浏览器中应使用 matchMedia 监听横竖屏，因其精准、无抖动、兼容性好；纯样式调整优先用 CSS @media (orientation: ...) 实现。
监听 window.orientation 已失效，改用 screen.orientation 或 resize 事件
在现代浏览器中，window.orientation 已被废弃（Safari 16.4+、Chrome 95+ 等均不触发），直接监听它会导致回调从不执行。真实可用的方式只有两个：screen.orientation API（需用户手势触发、仅部分安卓/桌面 Chrome 支持）和更通用的 resize 事件配合宽高比判断。
实际开发中几乎全部依赖 resize：设备旋转时视口尺寸变化，window.innerWidth 和 window.innerHeight 会交换或显著改变，这是最稳定、兼容性最好的信号。
- 不要写
window.addEventListener('orientationchange', ...)—— 它在 iOS Safari 中早已不触发，在 Android Chrome 中行为不可靠 -
screen.orientation可读取当前朝向（screen.orientation.type返回"portrait-primary"、"landscape-secondary"等），但无法监听变化，且首次访问需用户交互（如点击）才能启用监听 - 用
resize时注意节流：高频触发（尤其 iOS 滚动+旋转混合场景），建议用setTimeout防抖，延迟 100–150ms 再执行布局逻辑
用 matchMedia 监听横竖屏，比 resize 更精准、无抖动
matchMedia 是目前最推荐的方式，它基于 CSS 媒体查询语法，原生支持 (orientation: portrait) 和 (orientation: landscape)，且只在真正发生方向切换时触发，不会因缩放、滚动、键盘弹出误判。
它不依赖尺寸数值比较，也不受 viewport 缩放影响，语义清晰、性能轻量。
立即学习“前端免费学习笔记（深入）”；
- 写法：
const mql = window.matchMedia('(orientation: landscape)'); - 监听：
mql.addEventListener('change', e => { if (e.matches) { /* 进入横屏 */ } else { /* 进入竖屏 */ } }); - iOS Safari 从 12.2+、Chrome 74+、Firefox 69+ 全面支持，无需 polyfill
- 注意：首次调用
mql.matches即可获取当前状态，不必等事件；但旧版 Safari（≤12.1）需用mql.addListener()（已废弃但兼容）
纯 CSS 方案：用 @media (orientation: ...) 控制布局，避免 JS 干预
如果只是调整样式（比如隐藏某列、切换 flex-direction、修改 font-size），完全不需要 JS —— CSS 媒体查询就能搞定，更可靠、无白屏风险、利于 SSR。
关键点在于：orientation 媒体查询基于 viewport 的宽高关系，不是设备物理方向，因此在桌面浏览器缩放窗口时也会响应，符合预期。
- 示例：
@media (orientation: landscape) { .sidebar { display: block; } .content { width: calc(100% - 200px); } } @media (orientation: portrait) { .sidebar { display: none; } .content { width: 100%; } } - 注意：不要混用
min-width等其他条件覆盖 orientation，否则逻辑易混乱；优先保证 orientation 规则粒度足够细 - 在 iOS 上，Safari 的地址栏收起/展开会临时改变 viewport 高度，可能触发一次 orientation 变化（极短时间），但通常不影响布局稳定性
真需要物理方向？用 DeviceOrientation API 但慎用
如果业务强依赖设备陀螺仪数据（如 AR、体感游戏），才考虑 DeviceOrientation，但它和“布局适配”是两回事：它返回的是 alpha/beta/gamma 角度值，不是简单的横/竖屏布尔值，且需用户授权、iOS 上默认禁用、Android 各厂商权限策略不一。
- 触发前必须有用户手势（如
click或touchstart），否则requestPermission会直接 reject - 监听写法：
window.addEventListener('deviceorientation', e => { console.log(e.beta, e.gamma); }); - beta ≈ 前后倾斜角，gamma ≈ 左右倾斜角；仅当 |beta| 45° 才近似为横屏 —— 计算复杂、误差大、电池消耗高
- 绝大多数响应式布局场景下，这不是解决方案，而是过度设计
真正要落地的就两条路：CSS @media (orientation: ...) 覆盖 95% 样式需求；JS 用 matchMedia 处理需要动态加载模块、上报埋点或触发动画的少数场景。别碰 orientationchange，也别在没用户交互时试图读 screen.orientation —— 那些代码现在跑起来，大概率什么也不会发生。
