移动端横竖屏切换抖动源于视口重算、样式未同步与交互干扰叠加，需通过完善viewport设置、用matchmedia+requestanimationframe提前响应、重置弹性布局及禁用干扰交互样式来切断抖动链路。
移动端横竖屏切换时布局抖动或错位，不是“Flex 或 Grid 不行”，而是视口重算、样式未同步、交互干扰三者叠加的结果。关键不在重写整个布局，而在切断抖动链路。
viewport 设置不完整或冲突
缺少 <meta name="viewport"> 或参数错误，是抖动的起点。浏览器会先按 980px 宽度渲染，再缩放适配，导致元素尺寸反复计算、字体重排、flex-basis 重评估。
- 必须包含
width=device-width, initial-scale=1.0；缺一不可 - 避免
user-scalable=no和minimum-scale，它们会干扰 Safari 的方向切换重绘逻辑 - 若用
maximum-scale=1.0，仅限强交互场景（如 Canvas 游戏），否则影响可访问性
未监听 orientation 变化或响应滞后
CSS @media (orientation: landscape) 虽自动生效，但存在延迟（尤其 iOS）：Safari 在方向变更后约 100–300ms 才触发重排，期间可能短暂显示旧布局，造成“跳一下”感。
- 用
window.matchMedia("(orientation: landscape)")监听并提前响应，比纯 CSS 更及时 - 在
matchMedia.addListener()回调中，加requestAnimationFrame延迟一次重绘，避开首帧抖动 - 避免在
resize或orientationchange中直接读取offsetTop等触发强制同步布局的属性
弹性容器与子项尺寸逻辑冲突
横竖屏切换时，flex-basis、min-width、max-width 若未随方向重设，会导致子项伸缩异常——比如竖屏下 flex: 1 正常占满，横屏时因宽度突增，多个子项强行撑开又压缩，视觉上“弹来弹去”。
- 对关键容器，用
@media (orientation: landscape)显式重置flex-direction和flex-wrap - 子项慎用固定
width，改用flex: 0 1 minmax(240px, 1fr)，兼顾最小可用宽与弹性空间 - 图片/视频统一加
max-width: 100%; height: auto;，防止横屏时因原始宽高比被拉伸或截断
触摸交互层干扰视觉稳定性
点击瞬间的 tap 高亮、字体缩放、滚动惯性，会在方向切换前后叠加触发，放大抖动感。这不是布局问题，是渲染层反馈未收敛。
- 全局禁用高亮：
-webkit-tap-highlight-color: transparent - 防字体缩放破坏结构：
text-size-adjust: 100% - 限制 touch-action：
touch-action: manipulation（允许平滑滚动+点击，禁用双指缩放） - 避免给可点击区域设
transform: scale()或will-change，它们在方向切换时易引发图层重建
