@media (orientation: landscape) 在微信等 WebView 中不可靠，应改用 max-height 与 min-aspect-ratio 等真实视口条件组合，并配合 JS 防抖、强制重排及安全守卫措施。
单写 @media (orientation: landscape) 基本没用，真机上大概率不触发、延迟触发或误触发——这不是你 CSS 写错了，而是它本身在微信和多数安卓 WebView 里就不靠谱。
为什么 @media (orientation: landscape) 在微信里经常不生效
微信 Android 端用的是 X5 内核，对 screen.orientation 支持残缺；iOS 微信虽好些，但页面首次加载时 orientation 常为空或滞后。更关键的是：@media (orientation: landscape) 只看系统上报的方向，不感知真实视口变化——比如 iPhone 横屏后 innerHeight 从 844px 骤降到 390px，但它不会告诉你“高度快没了”。
- 常见现象：横屏转过去，样式没变；旋转回来，页面闪一下才恢复；折叠屏半开时假横屏，布局直接崩
- 根本原因：浏览器没重排，DOM 尺寸还是竖屏值，CSS 类已加，但渲染管线卡住
- 别指望
window.orientation或orientationchange事件，iOS 13+ 已废弃，安卓基本不支持
真正该监听的媒体查询条件
绕过 orientation，改用能反映真实瓶颈的组合断点。横屏的本质是“窄高变宽矮”，高度才是压垮布局的那根稻草。
-
@media (max-height: 480px) and (min-width: 640px)：覆盖 iPhone 横屏（390px 高）、小屏平板横放等真实场景 -
@media (min-aspect-ratio: 13/9)：13:9 ≈ 1.44，比单纯orientation抗干扰，键盘弹出、折叠屏展开一半也不易误判 - 必须搭配
@media (orientation: landscape)做双保险，但不能只靠它：@media (orientation: landscape) and (max-height: 480px)
写了媒体查询，但横屏后布局还是错位
写了规则≠生效。微信 WebView 渲染有延迟，且很多 CSS 单位在横屏下会剧烈失真。
-
height: 100vh是头号雷区：横屏后变成 390px，内容被截；改用min-height: 100dvh（iOS 16+/Chrome 支持）或min-height: 300px -
font-size: 4vw会暴涨：横屏宽度翻倍，文字撑破容器；必须套clamp(14px, 2.5vw, 16px) -
width: 100vw在 Safari 横屏下含地址栏高度，导致溢出；优先用width: 100%+overflow-x: hidden -
position: fixed元素会偏移：禁用top: 20px，改用top: env(safe-area-inset-top) + calc(20px)
必须配合的 JS 补救措施
纯 CSS 不够，得用 JS 主动干预渲染时机和尺寸判断。
- 用
window.matchMedia("(orientation: landscape)")监听，别用orientationchange - 首次加载必须手动执行一次判断：
checkOrientation()，否则直出横屏页面直接错过 - 加 50ms 防抖，避免 resize 频繁触发：
setTimeout(() => { /* 切类 + 强制重排 */ }, 50) - 切换类后，强制触发重排：
setTimeout(() => { document.body.offsetHeight }, 16) - iOS 微信横屏时
innerWidth偶尔为 0，判断加安全守卫：window.innerWidth > 100 && window.innerWidth > window.innerHeight
横屏适配真正的难点不在怎么写 media query，而在于微信各端对 innerWidth 更新、vh 解析、fixed 定位、字体缩放这四件事的处理完全不一致——你写的每一条 CSS，都得预设它会在某个机型上“不按常理出牌”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
