viewport 标签漏写 width=device-width 会导致 orientation 媒体查询失效，因浏览器无法识别视口方向变化；需配合 100dvh、100dvw、clamp() 及 js matchmedia 监听真实高度突变来可靠适配横屏。
viewport 标签写错，@media (orientation: landscape) 根本不触发
这不是 CSS 写错了，而是浏览器压根没进入方向判断流程。iOS Safari 和 Android Chrome 都依赖 <meta name="viewport"> 中的 width=device-width 来识别视口是否随旋转重算。漏掉它，横屏时仍按竖屏宽度渲染，orientation: landscape 永远不会匹配。
常见错误包括：
- 漏写
width=device-width—— 最常见，直接失效 - 写成固定值如
width=375—— 视口宽度锁死，无法响应变化 - 被 JS 动态覆盖 —— 初始正确，后续脚本改写后断连
推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
只靠 @media (orientation: landscape) 会导致横屏后内容被截或溢出
横屏时 100vh、100vw、flex-direction 这些值不会自动“理解”方向变化，它们的基准突变但 CSS 不兜底，必须显式干预。
-
100vh在 iPhone 14 横屏下只剩约 390px，常导致内容被截；改用100dvh（动态视口高度），或降级为min-height: 100%+html, body { height: 100% } -
100vw在 iOS Safari 横屏时包含已隐藏地址栏高度，造成水平溢出；优先用width: 100%或100dvw（注意 Android Chrome 100 以下不支持） -
flex-direction不会自动翻转；竖屏用column，横屏必须显式写row，否则子项仍堆叠 -
font-size: 4vw横屏暴增；改用clamp(14px, 2.5vw, 16px)锁死区间
微信 WebView 和多数安卓内核里，@media (orientation: landscape) 基本不可靠
微信 Android 用 X5 内核，对 screen.orientation 支持残缺；iOS 微信首次加载时 orientation 常为空或滞后。更关键的是：它只看系统上报的方向，不感知真实视口变化——比如横屏后 window.innerHeight 从 844px 骤降到 390px，但它不会告诉你“高度快没了”。
真正该监听的媒体查询条件是能反映真实瓶颈的组合断点：
-
@media (min-aspect-ratio: 13/9)：比单纯orientation抗干扰，键盘弹出、折叠屏半开也不易误判 -
@media (orientation: landscape) and (max-height: 480px)：高度骤减才是横屏的本质信号 - 必须搭配 JS 主动检查：用
window.matchMedia("(orientation: landscape)")监听，别用废弃的orientationchange事件
纯 CSS 无法解决横屏首次加载和快速旋转跳帧问题
页面直出横屏状态时，CSS 媒体查询不会回溯执行；iOS 15+ 快速旋转可能跳过触发；Android Chrome v79+ 仅读取初始方向，后续旋转不再更新。桌面模拟器的 “Rotate” 按钮也不等价于真机旋转。
必须补上 JS 守卫逻辑：
- 首次加载立即执行一次判断：
checkOrientation() - 用
matchMedia监听变更，加 50ms 防抖避免重排风暴 - 横屏后强制触发一次重排（例如修改
body.style.transform = 'scale(1)'）来唤醒渲染管线 - 真机测试不可省——模拟器永远测不出地址栏收起时机、折叠屏铰链角度、系统 UI 栏遮挡等真实瓶颈
最易被忽略的点是：横屏不是“宽变大”，而是“高骤减”。所有适配逻辑要围绕 max-height、innerHeight 的突变来设计，而不是迷信 orientation 字面含义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
