移动端做一个”整屏 hero”时，最经典的 bug：明明写了 height: 100vh，底部内容却被浏览器工具栏遮住一截。
一、原因：vh 不跟随动态工具栏
传统 100vh 按”最大视口”计算，而手机浏览器地址栏会随滚动收缩，实际可见高度是变化的，两者对不上。
二、解法一：100svh / 100lvh / 100dvh
100svh：小视口高度，工具栏展开时的最小值，最保守。100lvh：大视口高度，工具栏收起时的最大值。100dvh：动态视口高度，跟随工具栏伸缩实时变化。
一般场景用 100dvh，追求稳妥可以 min-height: 100svh。
三、解法二：JS 回退
老浏览器不认识新单位时，可以用 JS 监听 resize，把 window.innerHeight 写入 CSS 变量兜底，同时在 CSS 里保留新单位（旧浏览器忽略不认识的值）。
四、顺带一提
需要”至少一屏但不强锁一屏”的布局，用 min-height 而不是 height，能避免小屏设备上内容溢出被裁。
