单独用@media (orientation: landscape)基本不可靠，核心因viewport配置错误（缺width=device-width）、vh/vw单位突变、仅依赖宽高比判断且受系统UI干扰，须配合dvh/dvw单位、min-aspect-ratio或max-height断点及window.matchMedia监听。
单独用 @media (orientation: landscape) 基本不可靠，真机上大概率延迟、漏触发甚至完全不生效——核心问题不在 CSS 写法，而在 viewport 配置、单位选择和触发逻辑三者没对齐。
viewport 标签写错，orientation 就永远不会触发
iOS Safari 和 Android Chrome 都依赖 <meta name="viewport"> 才能识别方向变化。漏掉或写错就等于关掉了媒体查询的开关。
- 必须包含
width=device-width：缺它，横屏时浏览器仍按竖屏宽度渲染，orientation: landscape永远不匹配 - 禁用固定值如
width=375：视口宽度被锁死，媒体查询失去重算依据 - 防 JS 动态覆盖：初始设置后若被脚本改写（比如某些 UI 库自动注入），后续旋转将失效
- 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
vh/vw 在横屏下会“突变”，别直接当高度/宽度用
横屏时 100vh 不是“屏幕宽边”，而是真实高度（iPhone 14 横屏仅约 390px），内容常被截断；100vw 在 iOS Safari 中还可能包含已隐藏地址栏的高度，造成横向溢出。
- 优先用
100dvh/100dvw：动态视口单位，现代 Safari / Chrome 支持，但 Android WebView 旧版本不认 - 降级方案：
min-height: 100%+html, body { height: 100% }，再加overflow-y: auto - 绝对定位慎用
top: calc(100vh - 60px)：横屏计算值骤减，元素直接贴顶不可见 - 字体别只用
4vw：横屏时暴增，改用clamp(14px, 2.5vw, 16px)锁死区间
别只信 orientation，用 min-aspect-ratio 或 max-height 更稳
orientation: landscape 是逻辑判断（宽 > 高），不是物理朝向检测。折叠屏半展开、键盘弹出、系统 UI 展开时都可能误判，尤其在 Samsung Internet 或旧版安卓 WebView 中。
立即学习“前端免费学习笔记（深入）”；
- 更可靠写法：
@media (min-aspect-ratio: 13/9)（≈1.44，覆盖主流横屏设备） - 或直接响应瓶颈：
@media (max-height: 480px) and (min-width: 640px)，专治 iPhone 横屏高度骤减 - 组合使用更保险：
@media (orientation: landscape) and (min-width: 480px) - JS 监听别用废弃的
orientationchange，改用window.matchMedia('(orientation: landscape)')并监听change事件
Flex/Grid 不会自动翻转，必须显式重设
所谓“自适应”只是容器尺寸变了，子项约束没更新。竖屏用 flex-direction: column，横屏不重写 row，子项照样堆叠；grid-template-columns: repeat(3, 1fr) 横屏也不会自动变 repeat(6, 1fr)。
- 横屏规则里必须显式写：
flex-direction: row、grid-template-columns: repeat(2, 1fr) - 间距统一用
gap，删掉子项上的margin-right/margin-bottom，避免主轴翻转后错乱 - iOS Safari 对
grid-auto-flow: column有渲染延迟，可加transform: translateZ(0)强制 GPU 加速 - fixed 元素在横屏时容易偏移，避免
top: 20px这类绝对值，改用top: env(safe-area-inset-top)+calc()
最易被忽略的是：真机上系统 UI（控制中心、键盘、状态栏）会临时改变视口尺寸，造成样式闪跳；而模拟器的 “Rotate” 按钮根本测不出这个问题。测试必须上真机，且要覆盖快速旋转、半展开、UI 弹出等边缘动作。
