为什么CSS媒体查询在移动端横屏时匹配错误

根本原因是viewport标签缺失width=device-width，导致浏览器未启动方向判断逻辑；需用matchMedia监听orientation变化，并叠加宽高比等断点提升兼容性。

viewport 标签缺失或写错导致 orientation 媒体查询不计算

根本不是 CSS 写错了，而是浏览器压根没启动方向判断逻辑。iOS Safari 和 Android Chrome 都依赖 <meta name="viewport"> 中的 width=device-width 来识别视口是否随旋转变化。

1. 漏写 width=device-width：横屏时浏览器仍按竖屏宽度渲染，@media (orientation: landscape) 永远不会匹配
2. 写成固定值如 width=375：视口宽度被锁死，window.innerWidth 不变，媒体查询无依据重算
3. 被 JS 动态覆盖：初始设置后又被脚本改写，后续旋转失效
4. 推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

@media (orientation: landscape) 只看宽高比，不读传感器

它不是监听设备物理朝向，而是单纯比较 window.innerWidth > window.innerHeight 这一结果。地址栏是否收起、折叠屏是否半开、键盘是否弹出，都会让这个等式为假，导致匹配失败。

1. iOS Safari 横屏时若地址栏未隐藏，innerHeight 变大，orientation: landscape 可能根本不触发
2. Android Chrome v79+ 有时只读取初始方向，后续旋转不更新
3. iOS 15+ 快速旋转容易跳过重排（reflow），媒体查询延迟或漏判
4. 桌面模拟器的 “Rotate” 按钮 ≠ 真机旋转，测试必须上真机

单独用 orientation 断点兼容性差，必须叠加尺寸或宽高比条件

仅靠 @media (orientation: landscape) 在多数真实场景下不可靠。它在重排后才计算，且不兜底 UI 状态变化，容易漏判或反向匹配。

1. 稳妥写法是组合断点：@media (orientation: landscape) and (min-aspect-ratio: 1280/720)
2. 更推荐用实际瓶颈判断：@media (max-height: 480px) and (min-width: 640px) —— 横屏时高度骤减才是稳定信号
3. 避免用 max-width 替代 orientation：折叠屏展开、分屏模式下会误伤
4. 不要混用 width 和 device-width：前者是视口逻辑宽度，后者是设备物理像素，语义和触发时机完全不同

JS 监听 orientationchange 已废弃，matchMedia 才是标准路径

window.orientation 和 orientationchange 事件在现代浏览器中基本不触发。Chrome 99+ 彻底移除，Safari/Firefox 早就不响应，且与 CSS 渲染脱节。

1. 正确做法：const mql = window.matchMedia("(orientation: landscape)")
2. 监听变更：mql.addEventListener("change", e => { if (e.matches) { /* 横屏逻辑 */ } })
3. 首次加载必须手动检查：if (mql.matches) { /* 初始化横屏状态 */ }
4. IE11 兼容可选 mql.addListener()，但实际影响极小（IE11 本身无自动旋转逻辑）

真机上最易被忽略的点：横屏时 100vh 会变成设备物理高度（如 iPhone 14 横屏仅 390px），而你看到的是宽屏视图——内容被截、按钮沉底、滚动异常，全因这个单位没换。