仅靠@media (orientation: landscape) 很大概率失效，必须配合、组合断点及避免vh依赖才能真正生效；缺失viewport元标签、未手动检查matchMedia初始状态、父容器高度限制及100vh等值是主要失效原因。
直接结论：仅靠 @media (orientation: landscape) 很大概率失效，必须配合 <meta name="viewport">、组合断点、以及避免 vh 依赖才能真正生效。
为什么写了 @media (orientation: landscape) 却没反应
最常见原因不是 CSS 写错了，而是 HTML 缺了关键元信息。iOS Safari 和 Android Chrome 都需要 <meta name="viewport" content="width=device-width"> 才会识别方向变化。如果写成 width=375 或压根没加，浏览器就按“桌面宽度”渲染，orientation 根本不触发。
其他高频原因包括：
-
window.matchMedia('(orientation: landscape)')初始状态未手动检查，导致首屏加载时样式错位 - 安卓 WebView 在锁屏旋转后可能不更新
orientation，需监听mql.addEventListener('change', ...)做兜底 - 父容器设置了
flex-wrap: nowrap或height: 100vh，横屏后高度骤减（如 iPhone 14 从 844px → 390px），内容直接被裁或撑开
怎么写才真正稳定：用组合断点替代纯 orientation
orientation: landscape 在桌面模拟器中不可靠，且无法区分“宽屏手机横放”和“窄屏平板竖放”。更可控的写法是结合视口尺寸：
立即学习“前端免费学习笔记（深入）”；
@media (orientation: landscape) and (max-height: 400px) {
.card-grid { grid-template-columns: repeat(2, 1fr); }
body { font-size: clamp(14px, 2.5vw, 16px); }
}
<p>@media (min-width: 768px) and (max-height: 400px) {
/<em> 兜底：覆盖部分忽略 orientation 的 WebView </em>/
.nav { flex-direction: row; }
}注意：max-height: 400px 比单纯 min-width 更准——横屏时高度才是瓶颈。
横屏时哪些 CSS 值最容易翻车
别只改列数，这些值在横屏下几乎必然出问题：
-
height: 100vh：横屏后视口高度锐减，元素被压缩甚至消失；改用min-height: 100dvh（dvh是动态视口高度，兼容 iOS 16+）或固定min-height: 300px -
font-size: 4vw：横屏宽度变大，文字暴增；优先用clamp(14px, 2.5vw, 16px)锁死上下限 -
padding: 2rem 1rem：横屏后左右空间变大，但顶部/底部可能不够；建议改用padding: 0.5rem 1rem并搭配gap控制子项间距 -
grid-template-columns: repeat(3, 1fr)：横屏高度不够，三列挤成一列或换行错乱；降为repeat(2, 1fr)或1fr单列
真机测试必须防的三个干扰项
模拟器跑通不等于真机可用：
- iOS 系统底部手势条（Home Indicator）会遮挡内容，且占用真实高度；横屏时它可能从底部移到右侧，导致
100vh计算偏差 - 某些安卓浏览器（如 Samsung Internet）对
orientation媒体查询支持滞后，需用window.matchMedia主动轮询 - 页面初始加载时若设备已处于横屏，
@media不会自动触发，必须手动运行一次判断逻辑：if (mql.matches) { /* 应用横屏类 */ }
最易被忽略的一点：横屏重排有几十毫秒延迟，不要依赖“转屏即刻生效”，关键交互（如按钮位置、触摸热区）必须留出容错余量。
