@media (orientation: landscape) 常常失效，因其仅依赖设备方向传感器而非真实视口尺寸，无法响应ios safari首屏误判、微信x5内核延迟、折叠屏/键盘导致的假横屏及vh抖动等问题。
@media (orientation: landscape) 单独用基本没用，它不感知视口高度骤减、vh 抖动、fixed 元素偏移，也扛不住微信 X5 内核的延迟和误判。
为什么 @media (orientation: landscape) 常常失效
这个媒体查询只读设备方向传感器，不读真实视口尺寸。iPhone 14 横屏后视口高度只剩约 390px，但 CSS 规则不会自动知道“高度快不够了”。更实际的问题是：
- iOS Safari 加载首屏时可能还没上报方向，直接按竖屏渲染，造成初始错位
- Android 微信（X5 内核）里
orientation值长期卡在portrait，resize事件中window.innerWidth和window.innerHeight更新也严重滞后 - 折叠屏半展开、虚拟键盘弹出时，系统可能错误触发
orientation: landscape，导致假横屏样式污染 -
100vh在横屏下缩成390px，内容被截断；而@media规则本身不阻止这个行为
真正该监听的媒体查询条件
别只信 orientation。横屏崩坏的根源是“窄高变宽矮”，要盯住实际瓶颈：
- 优先用
@media (max-height: 480px) and (min-width: 640px)：覆盖 iPhone 横屏（390px高）、iPad 小窗横屏等真实场景 - 更抗干扰的写法是
@media (min-aspect-ratio: 13/9)（≈1.44），比单纯orientation更稳，折叠屏、键盘弹出也不易误判 - 如果非要用
orientation，至少叠加一层兜底：@media (orientation: landscape), (min-aspect-ratio: 1280/720)
必须同步改掉的三处关键代码
写了 @media 规则，但布局还是错——大概率卡在这三个硬伤上：
-
grid-template-columns: repeat(3, 1fr)没重设：横屏下应显式改为repeat(2, 1fr)或1fr，否则三列被压进390px高视口，文字全换行、卡片堆叠 -
font-size: 4vw没加限制：横屏宽度变大，vw基准暴涨，文字撑破容器；必须套clamp(14px, 2.5vw, 16px)锁死上下限 -
top: calc(100vh - 60px)这类计算值还在用：100vh横屏下只有390px，结果按钮直接贴顶不可点；应改用top: env(safe-area-inset-top) + calc(...)或min-height: 100%+html, body { height: 100% }
微信里必须加 JS 补救
在微信（尤其 Android X5）中，纯 CSS 的 @media (orientation: landscape) 几乎必然失效。必须靠 JS 主动判断并触发重排：
- 用
window.innerWidth > window.innerHeight && window.innerWidth > 100判断横屏，绕过 orientation API 缺陷 - 加
50ms防抖，避免 resize 频繁触发；首次加载也要手动执行一次判断 - 切换 class 后，用
setTimeout(() => { document.body.offsetHeight }, 16)强制触发重排 - 对视频、Canvas、自定义导航栏等关键区域，加
transform: translateZ(0)激活硬件加速，防渲染延迟
最麻烦的不是怎么写 CSS，而是不同端对 screen.orientation、innerWidth/Height、vh 的实现差异太大——iOS Safari、Android Chrome、微信 X5、Samsung Internet 各有一套逻辑。真机测试不能省，模拟器里的“旋转”按钮根本测不出地址栏收起/弹出带来的视口抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
