软键盘弹出时，如何基于视觉视口而非布局视口缩放元素？

针对软键盘弹出时元素填满视觉视口的需求，目前有两种靠谱的纯CSS方案：

1. 使用动态视口单位 dvh #

dvh（Dynamic Viewport Height）是CSS新增的动态视口单位，它会实时跟随视觉视口的高度变化——当软键盘弹出、视觉视口缩小时，100dvh会自动适配缩小后的高度，完美替代原来的100vh在该场景下的作用。

用法很简单：

.full-screen-element {
  height: 100dvh;
  /* 可选：去除默认边距影响 */
  margin: 0;
  box-sizing: border-box;
}

兼容性说明：Chrome 108+、Firefox 103+、Safari 15.4+均已支持，对于旧版浏览器，可以添加降级写法：

.full-screen-element {
  height: 100vh;
  height: 100dvh;
}

2. 利用固定定位撑满视口 #

固定定位（position: fixed）的元素是相对于视觉视口进行定位的，因此直接设置上下左右为0，就能让元素始终填满当前视觉视口，不受布局视口的影响：

.full-screen-element {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 可选：处理内边距/边框不超出视口 */
  box-sizing: border-box;
}

这种方法兼容性极佳，几乎支持所有现代移动浏览器，不需要考虑单位兼容性问题。需要注意的是，固定定位可能会带来滚动层级的问题，如果页面需要滚动，可能需要额外调整元素的层级或布局结构。

内容的提问来源于stack exchange，提问作者Paul