CSS 中 100vh 在移动端浏览器地址栏缩放下的高度陷阱与 dvh 的落地实践

做移动端全屏页面时，用 height: 100vh 铺满屏幕几乎成了条件反射。但真机上经常遇到一个别扭的现象：页面底部被浏览器地址栏挡住一截，或者用户向下滚动、地址栏收起后，原本应该贴底的按钮浮在屏幕中间。这个问题在 iOS Safari 和 Android Chrome 上都存在，本质是 vh 单位参照的是「视口最大高度」，也就是地址栏隐藏后的尺寸，而不是当前可见区域。结果就是首屏渲染时 100