移动端布局“突然偏移”是父子margin合并、100vh锁定初始高度、滚动条占宽及flex-shrink:1默认压缩等规范行为叠加所致，并非渲染失败；需优先排查viewport缺失、margin合并和100vh无fallback三大硬伤。
为什么移动端布局会“突然偏移”而不是直接崩坏
错位不是渲染失败，是多个规范行为叠加后的视觉结果：父子 margin 合并把整块内容顶上去、100vh被锁定在初始视口高度、滚动条宽度吃掉容器空间、flex 子项被flex-shrink: 1默认压缩——这些都不是 bug，但一起发生时，页面就“歪了”。
先查这三处最常漏掉的根因
别急着改 CSS，先确认是否踩中以下硬伤：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须存在且不能带maximum-scale=1或user-scalable=no——否则dvh、visualViewport全失效 - 父容器没 border/padding/overflow:hidden，且第一个子元素有
margin-top→ 必然触发父子 margin 合并，整块下移 - 用了
height: 100vh但没 fallback → iOS 键盘弹出时高度卡死，内容被截断或底部消失
针对不同错位现象，选对应解法
错位类型不同，修复点完全不同，混用方案反而加重问题：
- 文字/图片整体右偏 → 检查外层容器是否没设
width: 100%或margin: 0 auto，删掉所有float，改用display: flex+justify-content: center - 卡片/按钮在横屏下堆叠换行混乱 → 别只靠
@media (orientation: landscape)，改用@media (max-height: 480px) and (min-width: 640px)，并显式设flex-direction: column - 输入框被键盘盖住 → 把
height: 100vh换成min-height: 100dvh; max-height: 100dvh; overflow-y: auto，关键输入区加flex-shrink: 0 - 滚动时右侧出现空白或内容跳动 → 给滚动容器加
overflow-gutter: stable，fallback 用padding-right: 17px+box-sizing: border-box，别写死17px，用 JS 读取document.documentElement.clientWidth - document.body.clientWidth动态补偿
真机测试时最容易忽略的细节
模拟器看不出问题，但真机会暴露三个隐性偏差：
立即学习“前端免费学习笔记（深入）”；
-
flex-basis在 iOS Safari 和 Android WebView 中解析不一致：有的转成auto，有的保留像素值——务必在真机上检查 computed 样式 -
visualViewport.height在键盘收起瞬间有几十毫秒延迟，直接读可能拿到旧值，必须加setTimeout(() => {}, 50)防抖 - 第三方 UI 库（如 Vant）内部用了
position: absolute或transform，会脱离 flex 流，导致父容器display: flow-root也救不了它——得单独重写该组件的定位逻辑
