单靠@media (orientation: landscape)基本无效，因其依赖设备陀螺仪上报的“自然方向”，不感知真实视口变化，真机上常不触发、延迟或误判；应改用max-height与min-aspect-ratio等真实瓶颈条件组合，并配合JS防抖、强制重排及viewport校验。
单靠 @media (orientation: landscape) 基本无效，真机上大概率不触发、延迟生效或误判——这不是你写错了，是它本身在微信 WebView、Android X5 内核、折叠屏半展开等场景下就不靠谱。
为什么 @media (orientation: landscape) 经常不生效
它只读设备陀螺仪上报的“自然方向”，不感知真实视口变化。比如 iPhone 横屏后 window.innerHeight 从 844px 骤降到 390px，但 orientation 可能还滞留在 portrait；折叠屏展开一半、软键盘弹出时，也常被误判为竖屏。
- iOS Safari 15+ 快速旋转可能跳过触发，Android Chrome v79+ 甚至只读初始方向
- 微信 Android（X5 内核）对
screen.orientation支持残缺，iOS 微信首次加载时值常为空 - 桌面模拟器的 “Rotate” 按钮 ≠ 真机旋转，测试必须用真机
真正该用的媒体查询组合断点
横屏的本质是“宽变大、高骤减”，高度才是压垮布局的那根稻草。优先响应 max-height 和 min-aspect-ratio 这类真实瓶颈条件：
-
@media (max-height: 480px) and (min-width: 640px)：覆盖 iPhone 横屏（390px 高）、iPad 横屏（768px 宽）等典型窄高场景 -
@media (min-aspect-ratio: 13/9)：13:9 ≈ 1.44，比单纯orientation更抗干扰，能过滤键盘弹出、折叠屏半开等假横屏 - 必须和
@media (orientation: landscape)双保险组合：@media (orientation: landscape) and (max-height: 480px)
横屏下最危险的 CSS 单位及替代方案
100vh 和 100vw 在横屏时基准突变，且受地址栏收起/弹出影响剧烈，是布局错位头号雷区：
立即学习“前端免费学习笔记（深入）”；
-
100vh→ iPhone 14 横屏只剩约 390px，内容被截；改用min-height: 100dvh（Safari 16.4+/Chrome 105+），旧环境降级为min-height: 100%+html, body { height: 100% } -
100vw→ iOS Safari 横屏时包含已隐藏地址栏高度，导致右溢出；优先用width: 100%或width: 100dvw -
font-size: 4vw→ 横屏宽度翻倍，文字暴增撑破容器；必须套clamp(14px, 2.5vw, 16px)锁死区间 -
flex-direction/grid-template-columns不会自动翻转或重算，必须显式重设，例如竖屏flex-direction: column→ 横屏补flex-direction: row
必须配合的 JS 补救措施
纯 CSS 不够，尤其在微信和旧 WebView 中，需用 JS 主动干预渲染时机和尺寸判断：
- 用
window.matchMedia("(orientation: landscape)")监听，别用废弃的orientationchange事件 - 页面加载后立即手动检查一次：
if (mql.matches) { handleLandscape() } - 监听变更时加 50ms 防抖，并在回调中触发一次 reflow（如读取
document.body.offsetHeight），强制浏览器重排 - 绝对定位元素（如
top: 20px）在横屏后极易偏移，改用top: env(safe-area-inset-top) + calc(20px)，并确保 viewport 标签存在且未被 JS 覆盖
viewport 标签写错、100vh 没 fallback、JS 没做首次检查——这三处漏掉任何一项，横屏适配就大概率失效。真机测试时还要注意 iOS visualViewport.height 在键盘收起瞬间有几十毫秒延迟，直接读可能拿到旧值。
