@media (orientation: landscape) 在微信和多数安卓 WebView 中不可靠，因其不感知真实视口变化；应改用 @media (max-height: 480px) 和 @media (min-aspect-ratio: 13/9) 等真实瓶颈信号，并配合正确 viewport 设置与 JS 防抖干预。
@media (orientation: landscape) 在微信和多数安卓 WebView 中根本不可靠，这不是你 CSS 写错了，而是它压根不感知真实视口变化。iPhone 横屏后 window.innerHeight 从 844px 骤降到 390px，但 @media (orientation: landscape) 不会告诉你“高度快没了”——只靠它做适配，必踩坑。
为什么 @media (orientation: landscape) 经常不触发
微信 Android 用 X5 内核，对 screen.orientation 支持残缺；iOS 微信首次加载时 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) and (max-height: 480px)双保险，但不能只靠它
横屏后内容被截或溢出的硬解法
height: 100vh 是头号雷区：横屏后变成约 390px，内容直接被截；width: 100vw 在 Safari 横屏下含已隐藏地址栏高度，造成水平溢出。
替代方案要分层落地：
- 高度问题：优先用
min-height: 100dvh（iOS 16+/Chrome 支持），降级用min-height: 300px或min-height: 100%+html, body { height: 100% } - 宽度问题：弃用
100vw，改用width: 100%+overflow-x: hidden - 字体暴增：删掉
font-size: 4vw，改用font-size: clamp(14px, 2.5vw, 16px) - 固定定位错位：禁用
position: fixed，改用position: sticky（自动响应尺寸变化）或position: absolute+ JS 动态映射坐标（横屏时bottom: 20px→left: 20px）
viewport 标签写错会导致整个适配链路失效
@media (orientation: landscape) 不触发，90% 是因为 漏了 width=device-width。浏览器无法识别视口是否随旋转重算，直接跳过方向判断流程。
常见错误有：
- 漏写
width=device-width—— 最常见，直接失效 - 写成固定值如
width=375—— 视口宽度锁死，无法响应变化 - 被 JS 动态覆盖 —— 初始正确，后续脚本改写后断连
推荐写法（缺一不可）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
注意：maximum-scale=1.0 和 minimum-scale=1.0 必须同时存在，否则横屏重绘延迟会导致 fixed 锚点漂移。
必须搭配 JS 主动干预渲染时机
纯 CSS 无法解决首次加载和快速旋转跳帧问题。微信 WebView 渲染有延迟，DOM 尺寸还是竖屏值，CSS 类已加但渲染管线卡住。
关键补救动作：
- 用
window.matchMedia("(orientation: landscape)")监听，别用废弃的orientationchange事件 - 读取尺寸前加
setTimeout(() => {}, 0)，否则拿到的是旋转前的旧值 - 键盘收起瞬间
visualViewport.height有几十毫秒延迟，必须加setTimeout(() => {}, 50)防抖 - 用
getBoundingClientRect()验证：横屏后top突变为非 0 值，基本可确认是坐标系旋转问题
最易被忽略的点：横屏本质不是“方向变了”，而是“高度骤减”。所有适配逻辑都该围绕这个突变来设计，而不是等一个可能永远不来的 orientation 信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
