是，漏了viewport；必须写<meta name="viewport" content="width=device-width, initial-scale=1.0">，缺则@media (orientation: landscape)不触发，flex-direction不会自动切换，需显式声明并配合100dvh和组合断点。
横竖屏切换后Flex容器没反应，是不是漏了viewport？
不是Flex写错了，而是浏览器压根没触发方向重排。width=device-width缺失时，@media (orientation: landscape)永远不匹配——iOS Safari和Chrome都依赖这个声明来识别设备真实宽度。常见错误是写成width=375或被JS动态覆盖了初始<meta>标签。
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别加
maximum-scale=1或user-scalable=no——这会让dvh、visualViewport全部失效 - 真机测试时，先打开DevTools的“Rendering”面板，勾选“Emulate CSS media features”，手动切orientation看样式是否生效
flex-direction不随旋转自动切换，怎么写才真正生效？
CSS不会因为你转手机就把column改成row。只靠@media (orientation: landscape)容易漏掉折叠屏半展开、键盘弹出等假横屏场景，建议组合断点：
- 稳妥写法：
@media (orientation: landscape) and (min-aspect-ratio: 13/9)（覆盖主流横屏宽高比） - 更准的物理断点：
@media (max-height: 480px) and (min-width: 640px)——直接响应高度骤减瓶颈 - 横屏规则里必须显式重设
flex-direction: row，同时把height: 100vh换成min-height: 100dvh; max-height: 100dvh，否则iPhone 14横屏只剩390px，内容被截
横屏下子项错位、换行混乱，是不是flex-shrink惹的祸？
默认flex-shrink: 1在横屏宽度变大后反而导致子项被意外压缩——比如文字多的按钮被压扁换行，图标被拉伸变形。这不是bug，是弹性计算逻辑在不同视口下的自然结果。
- 固定尺寸项（如搜索按钮、头像）必须加
flex-shrink: 0，别指望父容器display: flex就自动保护它们 - 避免
flex-basis混用rpx或vw：比如flex-basis: 300rpx在iPad上算出来是409px，远超预期，引发压缩失衡 - 一行三按钮，中间文字长、两边图标小？中间设
flex-shrink: 0，两边设flex-shrink: 2——数值是压缩难易度倒数，不是权重比例
真机上布局“抖一下”再归位，怎么消除这种延迟？
横竖屏切换时，iOS Safari的visualViewport.height在键盘收起瞬间有几十毫秒延迟，直接读可能拿到旧值；Android WebView对flex-basis解析也不一致（有的转auto，有的保留像素值）。这些隐性偏差模拟器根本测不出来。
立即学习“前端免费学习笔记（深入）”；
- 监听方向变化必须用
window.matchMedia("(orientation: portrait)").addEventListener("change", ...)，别用废弃的orientationchange事件 - 在
change回调里加requestAnimationFrame(() => { /* 强制reflow */ document.body.offsetHeight; })，逼浏览器立刻重算布局 - 第三方UI库（如Vant）内部用了
transform或position: absolute，会脱离flex流——此时display: flow-root也救不了，得单独重写该组件的定位逻辑
