@media (orientation: landscape) 不稳定，根本原因是 viewport 缺失或被覆盖、依赖重排导致延迟触发、iOS/安卓兼容性差异；需配合 viewport 设置、aspect-ratio 兜底、dvh 单位及主动 matchMedia 监听。
直接结论：仅靠 @media (orientation: landscape) 不够稳定，必须配合 viewport 设置、宽高比兜底、vh/dvw 单位甄别，且首次加载需手动检查匹配状态。
为什么 @media (orientation: landscape) 有时不生效
根本原因不是 CSS 写错了，而是触发条件没满足。iOS Safari 和多数安卓 WebView 要求 <meta name="viewport" content="width=device-width"> 存在且未被 JS 覆盖——缺了这句，浏览器压根不识别方向变化。另外，该媒体查询依赖重排（reflow）后才计算，有几十毫秒延迟；快速旋转或锁屏状态下可能跳过触发。
实操建议：
- 确保 HTML 中存在且唯一：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 禁用
window.orientation和orientationchange事件——它们在 iOS 13+ 已废弃，安卓支持极差 - 改用
window.matchMedia('(orientation: landscape)')主动监听，并在页面加载时立即执行一次mql.matches判断初始状态 - 加一层兜底：
@media (orientation: landscape), (min-aspect-ratio: 1280/720)，避免 Chrome 某些版本漏触发
vh 在横屏下为何常导致内容截断
100vh 在横屏时等于设备物理高度（如 iPhone 14 横屏仅 390px），但用户看到的是宽屏视图，结果是顶部内容被切、按钮沉底不可点。更麻烦的是，iOS Safari 的 vh 会随地址栏收起/展开动态变化，引发布局抖动。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 避免用
height: 100vh做容器主高，改用height: 100dvh（dynamic viewport height），它自动排除 UI 栏；但注意 Android Chrome 100 以下不支持 - 若需兼容老环境，用
height: 100%+ 父级display: flex; flex-direction: column控制伸缩 - 文字行高、内边距等非结构性尺寸，优先用
rem或em，而非vh
横屏时布局列数与字体怎么安全调整
横屏宽度变大但高度骤减，盲目增加列数或放大字号反而破坏可读性。重点应响应“可用高度收缩”，而非“可用宽度增加”。
实操建议：
- 网格列数降级：竖屏
grid-template-columns: repeat(3, 1fr)→ 横屏repeat(2, 1fr)或1fr - 字体用
clamp()控制上下限：font-size: clamp(14px, 2.5vw, 16px)，比纯vw更稳，防横屏时突变 - 内边距和行高同步压缩：
padding: 0.5rem 1rem、line-height: 1.3，避免文字撑高容器 - 慎用
100vw做宽度——Safari 横屏时它含隐藏地址栏高度，导致内容溢出；优先用100%或100dvw
Flex 容器在横屏下不换向的常见卡点
写了 @media (orientation: landscape) { flex-direction: row; } 却没效果，大概率是被更高优先级样式覆盖，或 flex-wrap: nowrap 锁死了子项换行逻辑。
实操建议：
- 检查是否被内联样式、
!important或更具体的选择器覆盖，用浏览器开发者工具的“Computed”面板确认最终生效值 -
flex-direction只控制主轴方向，不影响换行；若子项仍堆成一列，先看父容器是否设了flex-wrap: nowrap - 横屏不等于必须
row，例如表单控件横向拉长会降低可用性，此时保持column+ 缩小max-width更合理 - 触摸目标尺寸不能忽略：横屏后按钮宽度变大，但高度可能不足 44px，需显式设置
min-height: 44px
真正难的不是写对一条媒体查询，而是在真机上验证地址栏高度变化、系统 UI 干扰、WebView 兼容性差异这些看不见的变量。每次旋转后，盯住控制台的 layout shift 提示，比盯着代码更容易发现问题根源。
