仅靠@media (orientation: landscape)不可靠，必须配合viewport标签、尺寸断点和matchMedia监听；viewport缺width=device-width或被JS覆盖会导致方向检测失效；需用100dvh/100dvw、clamp()及显式flex-direction应对基准突变。
@media (orientation: landscape) 单独用基本不可靠，必须配对 viewport 标签 + 尺寸断点 + matchMedia 监听才能稳定响应。
viewport 标签写错，@media (orientation: landscape) 就不会触发
iOS Safari 和 Android Chrome 都依赖 viewport 标签识别方向变化。漏了或写错，后续所有媒体查询都压根不计算。
- 漏掉
width=device-width—— 缺它，横屏时浏览器仍按竖屏逻辑渲染，orientation永远不匹配 - 用了固定值如
width=375—— 视口宽度不变，媒体查询无从重算 - 被 JS 动态覆盖 —— 初始设置后又被脚本改写，导致后续方向变化失效
推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
仅靠 orientation 媒体查询，横屏样式大概率延迟或漏掉
它不是实时响应旋转动作，而是在浏览器完成重排（reflow）后才重新计算，通常有几十毫秒延迟。更关键的是：它只看“逻辑宽度是否大于高度”，不关心物理朝向或 UI 栏是否展开。
立即学习“前端免费学习笔记（深入）”；
- 横屏时若地址栏未收起、折叠屏半展开，
window.innerWidth <= window.innerHeight，orientation: landscape可能根本不匹配 - iOS 15+ 快速旋转可能跳过触发；Android Chrome v79+ 仅读取初始方向，后续旋转不再更新
- 桌面模拟器的 “Rotate” 按钮不等价于真机旋转，测试必须用真机
稳妥做法是组合判断：@media (orientation: landscape) and (min-aspect-ratio: 1280/720) 或 @media (max-height: 480px) and (min-width: 640px) —— 后者直接响应真实瓶颈（高度骤减）。
100vh、100vw、flex-direction 这些值最容易翻车
它们在方向切换后基准突变，但 CSS 不会自动兜底，需显式干预：
-
100vh在 iPhone 14 横屏下只剩 390px，常导致内容被截；改用100dvh（动态视口高度），或降级为min-height: 100%+html, body { height: 100% } -
100vw在 iOS Safari 横屏时包含已隐藏地址栏高度，造成溢出；优先用100%或100dvw（注意 Android Chrome 100 以下不支持） -
flex-direction不会自动翻转；竖屏用column，横屏必须显式写row，否则子项仍堆叠 -
font-size: 4vw横屏暴增；改用clamp(14px, 2.5vw, 16px)锁死区间
别用 orientationchange，改用 matchMedia 主动监听
window.addEventListener('orientationchange', ) 在 iOS 12+ 和所有现代安卓浏览器中已被废弃。它只反映设备陀螺仪角度，和实际 CSS 渲染方向脱节——比如平板横放但应用强制竖屏，事件照发，但媒体查询根本不匹配。
- 正确做法：
const mql = window.matchMedia('(orientation: landscape)') - 监听变更：
mql.addEventListener('change', e => { if (e.matches) { /* 横屏逻辑 */ } }) - 首次加载也要手动检查：
if (mql.matches) { /* 初始化横屏状态 */ }
真正容易被忽略的是：横竖屏切换瞬间，视口宽高比可能短暂为 NaN（尤其 iOS Safari 中旋转动画未完成前），此时媒体查询会跳过匹配，必须加宽松 fallback，比如 @media (orientation: landscape), (aspect-ratio > 1)。
