100vh在Safari和部分Android WebView中被静态计算、不随visual viewport更新，导致地址栏伸缩时布局抖动；应改用min-height: 100dvh并配合降级策略、safe-area-inset-top定位及focusin事件兜底。
移动端地址栏伸缩引起的布局抖动，本质是 100vh 在 Safari 和部分 Android WebView 中被静态计算、不随 visual viewport 动态更新——地址栏收起时视口高度变大，但 CSS 仍按旧值渲染，导致内容“突然上移”或“底部被截”，不是动画问题，而是尺寸失联。
为什么 100vh 在地址栏伸缩时必然抖动
iOS Safari 的 100vh 值在页面加载时锁定为 layout viewport 高度（含地址栏），后续地址栏收起后，visual viewport 扩展了，但 100vh 不变。结果就是：你写了 height: 100vh 的容器，在地址栏收起后实际比可视区域还高，底部内容沉底不可见；反之，地址栏弹出时又会撑出滚动条，触发重排抖动。
- 真机测试中，手动下拉控制中心、滑动地址栏、切后台再切回，都会复现该抖动
-
resize事件在地址栏伸缩时不触发（iOS 尤其明显），无法靠 JS 监听重设高度 - 哪怕只对
body或根容器用100vh，只要它参与 flex/grid 主轴尺寸计算，抖动就逃不掉
用 100dvh 替代 100vh，并配降级策略
100dvh（dynamic viewport height）是目前唯一原生解法，它始终代表「当前可视区域高度」，地址栏收放、键盘弹出时自动更新，Safari 16.4+、Chrome 105+ 已支持。
- 写法必须是
min-height: 100vh; min-height: 100dvh;——后者覆盖前者，不支持的浏览器自然回退 - 禁用
height: 100dvh，否则内容超长时无法滚动；应配合overflow-y: auto - Flex 容器中，子项需加
flex-shrink: 0或flex: 0 0 auto，防止100dvh容器收缩时把内容压扁
fixed 元素在地址栏伸缩时跑偏怎么稳住
地址栏收起瞬间，top: 0 这类绝对定位会按旧视口定位，等重绘完成才跳到新位置，造成“闪一下”。这不是错位，是定位时机错配。
- 改用
top: env(safe-area-inset-top)+calc()组合，例如：top: calc(env(safe-area-inset-top) + 1rem) - 避免
width: 100vw，改用width: 100%并确保父容器有overflow-x: hidden - 对关键
fixed元素加backface-visibility: hidden，强制启用合成图层，缓解渲染延迟
兜底：JS 监听 focusin/blur + class 切换
当 100dvh 不可用或需更精细控制（比如键盘+地址栏同时出现），focusin 是比 resize 更可靠的信号——输入框聚焦几乎总伴随地址栏变化。
- 监听
document.addEventListener('focusin', () => document.body.classList.add('keyboard-active')) - CSS 中用
.keyboard-active .hero { min-height: 80dvh; }等动态降级值 - 别依赖
window.innerHeight实时赋值，它在 iOS 上延迟严重且不稳定
真正难的不是选 dvh 还是 vh，而是在所有用到视口单位的地方（包括 background-size: cover、grid-template-rows、aspect-ratio 推导高度）都做一致性处理——漏掉一个，抖动就会从那个点重新爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
