移动端布局错位源于规范行为叠加：viewport缺失导致dvh失效、100vh在键盘弹出时塌陷、margin合并引发视觉偏移、滚动条吃宽及flex-shrink压缩，需优先修复这三处硬伤。
移动端布局错位不是 CSS 写错了，而是几个规范行为叠加后“看起来歪了”——margin 合并、100vh 锁死高度、滚动条吃宽、flex-shrink: 1 默认压缩，全在按标准执行，但一起发生就偏。
先确认 viewport meta 是否完整且干净
这是所有错位的起点。缺它或写错，dvh、visualViewport 全失效，后续所有修复都打滑：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须存在，且不能带maximum-scale=1、user-scalable=no（iOS 会降级兼容模式） - 绝对不要写
height=device-height或固定width=375，前者让所有vh类失效，后者在 Pro Max 上强制拉伸 - 真机测试时，用
document.documentElement.clientWidth对比window.screen.width：若前者明显偏小，说明视口被 Safari 自动缩放了（常见于未设max-width的图片或长单词）
修复 100vh 在软键盘弹出时塌陷
h-screen 和 min-h-screen 编译为 height: 100vh / min-height: 100vh，而 iOS Safari 根本不更新 vh 值，键盘一弹，底部直接截断或留白：
- 换用
min-h-[100dvh]（Tailwind ≥ 3.3），它随可视区域动态变化，iOS 16.4+、Chrome 109+ 已稳定支持 - 必须配合
flex flex-col使用，否则min-h-[100dvh]只设最小高度，子项不会弹性分配空间 - 主内容区加
flex-1（或显式flex-grow flex-shrink-0 min-w-0），避免文字溢出撑宽；底部固定按钮加flex-shrink-0，否则键盘弹出会压扁 - 删掉
html或body上的h-full/min-h-full，它们会干扰dvh行为
解决父子 margin 合并导致整块上移
父容器没 border/padding/overflow:hidden，第一个子元素又有 mt-4，就会触发 margin 合并——不是 bug，但视觉上像“突然顶上去”：
立即学习“前端免费学习笔记（深入）”；
- 最稳解法：给父容器加
pt-0.5（即padding-top: 0.125rem），哪怕 1px 也能打断合并 - 次选：子元素改用
mt-4→pt-4（把 margin 换成 padding），前提是它不需脱离文档流 - 别依赖
overflow-hidden来防合并——它只裁剪，不阻止合并发生；也别加border-t，可能破坏设计一致性
排查右侧黑边（水平滚动/溢出）
所谓“黑边”，是某个子元素宽度 > 100vw，浏览器强制渲染横向滚动区域，而深色背景没覆盖过去。你加 overflow-x-hidden 无效，说明问题不在 body 层级：
- 打开 Chrome DevTools → Rendering → 勾选
Highlight overflows，红色标记处就是越界源 - 重点搜这些高危类：
ml-40、mr-32、w-[500px]、pl-20—— 它们在max-[639px]下大概率溢出 - 图片务必加
max-w-full，别只靠w-4/5；flex容器里子项加min-w-0防文字撑宽 - 侧边栏用
fixed时，必须直接加在最外层容器上（如<div id="mobile-menu" class="fixed inset-y-0 left-0">），否则父容器仍占位，间接撑高body引发滚动条
真正麻烦的不是单个问题，而是它们常一起出现：viewport 不对 → dvh 失效 → 你 fallback 到 vh → 键盘弹出塌陷 → 你加 overflow-x-hidden 掩盖 → 结果发现黑边根本是 ml-40 导致的。所以优先查 viewport、margin 合并、100vh 这三处硬伤，比调样式快得多。
