@media (orientation: landscape) 单独使用效果差，因它仅检测方向而不感知视口高度骤减、vh抖动、fixed偏移及系统UI干扰等真实问题。
直接用 @media (orientation: landscape) 处理横屏错位，大概率会漏掉真机关键问题——它不解决高度骤减、vh抖动、fixed偏移和系统UI干扰这四类典型崩坏。
为什么 @media (orientation: landscape) 单独用效果差
这个媒体查询只反映设备方向，不感知实际视口尺寸变化。iPhone 14 竖屏高 844px，横屏只剩 390px，但 @media (orientation: landscape) 不会告诉你“高度快不够了”。更麻烦的是：iOS Safari 加载时可能还没上报方向，首屏直接按竖屏渲染；部分安卓 WebView（如 Samsung Internet）对它的触发有数百毫秒延迟，造成布局闪跳。
- 它不阻止
100vh在横屏下缩成 390px 导致内容被截断 - 它不修复
position: fixed元素在地址栏收起/展开时的定位漂移 - 它不应对虚拟键盘弹出时的假横屏误判（尤其折叠屏）
必须搭配的三个硬性条件
单写 @media (orientation: landscape) 是无效动作。要真正稳住横屏，得同步满足：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须存在且无user-scalable=no或maximum-scale干扰 - 所有涉及高度的值（
height、max-height、top计算）避开vh，改用dvh（现代 Safari/Chrome 支持）或min-height: 100%+html, body { height: 100% } - fixed 元素禁用
top: 20px这类绝对数值，改用top: env(safe-area-inset-top)+calc()
真正该监听的媒体查询条件
别只信 orientation。横屏错位的根源是“窄高变宽矮”，所以优先用能反映真实瓶颈的组合断点：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-height: 480px) and (min-width: 640px)—— 覆盖 iPhone 横屏（390px 高）、iPad 横屏（744px 高但常配小窗）等真实场景 -
@media (min-aspect-ratio: 13/9)—— 13:9 ≈ 1.44，比单纯orientation更抗干扰，折叠屏、键盘弹出时也不易误判 - 若必须用
orientation，至少加一层 JS 防抖：window.matchMedia("(orientation: landscape)").addEventListener("change", () => requestAnimationFrame(() => {...}))
横屏重置时最容易被忽略的三处细节
写了重置规则，但布局还是错——往往卡在这三个地方：
-
grid-template-columns: repeat(3, 1fr)在横屏下没改，结果三列被压进 390px 高的视口里，文字全换行、卡片堆叠；应显式改为repeat(2, 1fr)或1fr -
font-size: 4vw在横屏下因宽度变大而暴涨，撑破容器；必须套clamp(14px, 2.5vw, 16px)锁死上下限 -
flex-direction: column的父容器，在横屏下没同步改flex-wrap: wrap或重设子项flex-basis，导致子项强行拉伸变形
横屏不是“换个方向就完事”，它是视口高度被砍掉一半后的紧急重构。orientation 媒体查询只是开关，真正起作用的是你是否在那一刻重写了高度依赖、重算了弹性比例、并绕开了浏览器对 fixed 和 vh 的历史包袱。
