应监听 min-aspect-ratio 或 max-height 等实际尺寸条件而非仅 orientation，因后者在 Android 折叠屏、键盘弹出等场景易误判；优先用 @media (min-aspect-ratio: 13/9) 或 @media (max-height: 480px) and (min-width: 640px) 等可靠断点。
横屏时布局错乱，media query 该监听什么条件
移动端横屏触发重排，不能只靠 orientation: landscape —— 它在部分 Android 浏览器里会误判（比如折叠屏展开一半、虚拟键盘弹出时都可能触发假横屏）。真正稳定的方式是用 min-aspect-ratio 或 max-height 配合实际尺寸判断。
-
@media (min-aspect-ratio: 13/9)比orientation更可靠，13:9 约等于 1.44，能覆盖大多数横屏设备的实际宽高比 - 优先用
@media (max-height: 480px) and (min-width: 640px)这类具体断点，尤其针对 iPad、折叠屏等多形态设备 - 避免单独依赖
orientation，iOS Safari 在页面加载瞬间可能还没上报方向，导致首屏样式错位
横屏下字体和间距突然变小或撑开，怎么保持视觉一致性
不是所有元素都会自动适配横屏，vw/vh 单位在方向切换时基准变化剧烈（比如竖屏 100vh 是 812px，横屏变成 375px），容易引发缩放失真。
- 关键字号改用
clamp(16px, 4vw, 20px)，把 vw 限制在合理区间，避免横屏时文字被压扁 - 留白类
padding和margin尽量避开纯vh，改用rem+ 媒体查询微调 - 如果用了
viewport的user-scalable=no，横屏后用户无法双指缩放，此时更要确保行高、点击区域足够大，否则可操作性直接下降
横屏时 Flex/Grid 布局塌陷或换行异常
Flex 容器的 flex-direction 不会随屏幕旋转自动翻转，Grid 的 grid-template-columns 也不会重算，所谓“自适应”其实是假象——本质是容器尺寸变了，但子项约束没更新。
- 横屏专用规则里，显式重设
flex-direction: row（竖屏可能是 column）或调整grid-template-columns: repeat(4, 1fr)→repeat(6, 1fr) - 慎用
flex-wrap: wrap配合固定flex-basis，横屏宽度变大后可能多出一整行空白，建议用minmax(200px, 1fr)替代固定值 - iOS Safari 对
grid-auto-flow: column在横屏下有渲染延迟，出现闪动，临时方案是加transform: translateZ(0)强制 GPU 加速
横屏后 fixed 元素定位偏移或消失
移动端 fixed 元素在横屏时经常跑偏，根本原因是浏览器对 visual viewport 和 layout viewport 的处理不一致，尤其在地址栏收起 / 弹出过程中。
立即学习 “ 前端免费学习笔记（深入）”；
- 避免对
top/bottom做绝对数值定位（如top: 20px），改用top: env(safe-area-inset-top)+calc()动态计算 - 横屏下
height: 100vh可能超出可视区（因为地址栏高度参与计算），应改用height: 100dvh（支持 Chrome 105+/Safari 16.4+），旧版本降级为height: 100%+position: absolute - 某些安卓 WebView 中，横屏后
fixed元素会短暂脱离文档流，可用will-change: transform提前提示渲染引擎
横屏适配最麻烦的不是写多少 media query，而是不同系统对“横屏状态”的定义根本不统一——iOS 认为键盘弹出不算横屏，Android 可能算；折叠屏半开时，Chrome 和 Safari 上报的 screen.orientation.angle 还可能差 90 度。得靠实际设备反复测，别信模拟器。
