CSS dvh-svh-lvh 与 VisualViewport 移动视口稳定布局实践

核心价值通过 `dvh/svh/lvh` 适配移动浏览器的地址栏收缩与展开，保持容器高度稳定。使用 `VisualViewport` 监听视口变化，对特定组件进行自适应调整，兼顾键盘弹出场景。基础布局.app { min-block-size: 100dvh; padding-block-end: env(safe-area-inset-bottom); }

.header { block-size: 64px; }

.content { min-block-size: calc(100dvh - 64px); }

键盘场景治理if (window.visualViewport) {

const vv = window.visualViewport

function update() {

document.documentElement.style.setProperty('--vvh', `${vv.height}px`)

}

vv.addEventListener('resize', update)

vv.addEventListener('scroll', update)

update()

}

.input-panel { block-size: min(400px, var(--vvh, 100svh)); }

治理建议优先使用 `dvh` 作为整体高度单位；在键盘弹出组件中结合 `svh` 或 `VisualViewport`。使用 `env(safe-area-inset-*)` 兼容刘海与底部指示条；避免固定绝对高度造成遮挡。结论结合新视口单位与 VisualViewport，可有效缓解移动端高度跳变与遮挡问题，使布局在多设备与浏览器下更稳定。