viewport meta标签未配全是移动端布局偏移最硬根因，必须同时包含width=device-width、initial-scale=1.0、maximum-scale=1.0（或user-scalable=no），缺一不可，否则fixed定位错位、100vh/dvh计算失准、键盘弹出时visualViewport.height不稳定。
viewport meta 标签写全了没
没配全 <meta name="viewport"> 是移动端布局偏移最硬的根因。只写 width=device-width 不够，iOS Safari 和部分安卓 WebView 会自动缩放，导致 fixed 元素锚点错位、100vh 计算失准、甚至 dvh 失效。
必须同时包含三项：width=device-width、initial-scale=1.0、maximum-scale=1.0（或加 user-scalable=no）。缺一不可。
- 加了
maximum-scale=1.0后，visualViewport.height才能稳定响应键盘收起 - 漏掉
initial-scale=1.0，某些高 DPR 设备（如 iPhone 14）会把 fixed 定位坐标按物理像素对齐，但视口却被缩放，视觉上就“飘”了 -
user-scalable=no不是必须，但加了能杜绝双指缩放后 fixed 元素相对视口漂移
父容器有没有触发 margin 合并
文字/图片整体“上移”或“下移”，大概率是父子 margin 合并：父容器没 border/padding/overflow，第一个子元素又有 margin-top，浏览器直接把子元素的外边距“透出”到父容器外部，整块内容就被顶上去或拉下来。
这不是 bug，是 CSS 规范行为，但真机上特别明显。
立即学习“前端免费学习笔记（深入）”；
- 临时验证：给父容器加
padding: 1px或overflow: hidden，错位立刻消失 - 长期解法：用
display: flow-root替代 hack，它能创建新的块级格式化上下文（BFC），天然隔离 margin 合并 - 别依赖
margin-top做垂直间距，改用gap（flex/grid）或 padding
用了 100vh 就得配 fallback
在微信、iOS 键盘弹出、地址栏收起等场景下，height: 100vh 会被锁死在初始视口高度，内容被截断或底部消失——这不是渲染失败，而是高度没重算。
现代方案优先用 100dvh，但微信安卓 X5 内核普遍不支持，iOS 也得 ≥ 8.0.49 才行。
- 安全写法是：
min-height: 100vh; min-height: 100dvh;—— 注意顺序，老内核跳过100dvh，新内核覆盖100vh - 更稳的是 JS 动态注入：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，再配合min-height: calc(var(--vh, 1px) * 100) - 别忘了安全区：
padding-bottom: env(safe-area-inset-bottom)，否则微信 iOS 底部小白条会盖住按钮
fixed 元素有没有被祖先干扰
即使 viewport 正确，position: fixed 在 iOS Safari 里也会悄悄降级为 relative，只要它的任意祖先满足以下任一条件：
- 设置了
transform（哪怕只是transform: translateZ(0)） - 设置了
overflow: hidden或overflow: auto - 用了
filter、perspective或will-change
此时 fixed 元素的“视口”不再是整个屏幕，而是这个祖先容器。调试时可临时给疑似父级加 outline: 1px solid red，看 fixed 元素是否跟着它移动。
修复只有两个选择：删掉无意义的 transform，或者把 fixed 元素提到 <body> 直接子级（需 JS 挂载）；用 left: 0; right: 0; 替代 width: 100vw，避免滚动条宽度吃掉右边空间。
