根本原因是viewport标签缺失width=device-width，导致浏览器未启动方向判断逻辑；需用matchmedia监听orientation变化，并叠加宽高比等断点提升兼容性。
viewport 标签缺失或写错导致 orientation 媒体查询不计算
根本不是 CSS 写错了，而是浏览器压根没启动方向判断逻辑。iOS Safari 和 Android Chrome 都依赖 <meta name="viewport"> 中的 width=device-width 来识别视口是否随旋转变化。
- 漏写
width=device-width：横屏时浏览器仍按竖屏宽度渲染，@media (orientation: landscape)永远不会匹配 - 写成固定值如
width=375：视口宽度被锁死，window.innerWidth不变，媒体查询无依据重算 - 被 JS 动态覆盖：初始设置后又被脚本改写，后续旋转失效
- 推荐写法：
<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 这一结果。地址栏是否收起、折叠屏是否半开、键盘是否弹出，都会让这个等式为假，导致匹配失败。
- iOS Safari 横屏时若地址栏未隐藏，
innerHeight变大，orientation: landscape可能根本不触发 - Android Chrome v79+ 有时只读取初始方向，后续旋转不更新
- iOS 15+ 快速旋转容易跳过重排（reflow），媒体查询延迟或漏判
- 桌面模拟器的 “Rotate” 按钮 ≠ 真机旋转，测试必须上真机
单独用 orientation 断点兼容性差，必须叠加尺寸或宽高比条件
仅靠 @media (orientation: landscape) 在多数真实场景下不可靠。它在重排后才计算，且不兜底 UI 状态变化，容易漏判或反向匹配。
- 稳妥写法是组合断点：
@media (orientation: landscape) and (min-aspect-ratio: 1280/720) - 更推荐用实际瓶颈判断：
@media (max-height: 480px) and (min-width: 640px)—— 横屏时高度骤减才是稳定信号 - 避免用
max-width替代orientation：折叠屏展开、分屏模式下会误伤 - 不要混用
width和device-width：前者是视口逻辑宽度，后者是设备物理像素，语义和触发时机完全不同
JS 监听 orientationchange 已废弃，matchMedia 才是标准路径
window.orientation 和 orientationchange 事件在现代浏览器中基本不触发。Chrome 99+ 彻底移除，Safari/Firefox 早就不响应，且与 CSS 渲染脱节。
- 正确做法：
const mql = window.matchMedia("(orientation: landscape)") - 监听变更：
mql.addEventListener("change", e => { if (e.matches) { /* 横屏逻辑 */ } }) - 首次加载必须手动检查：
if (mql.matches) { /* 初始化横屏状态 */ } - IE11 兼容可选
mql.addListener()，但实际影响极小（IE11 本身无自动旋转逻辑）
真机上最易被忽略的点：横屏时 100vh 会变成设备物理高度（如 iPhone 14 横屏仅 390px），而你看到的是宽屏视图——内容被截、按钮沉底、滚动异常，全因这个单位没换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
