Chrome 108 修改移动端键盘弹出时100%高度计算逻辑，CSS能否实现视口收缩？

结论 #

仅通过纯CSS无法实现iOS端键盘弹出时自动收缩viewport的效果，核心原因是iOS Safari的视口机制限制：

• iOS Safari的viewport尺寸在页面加载完成后就固定，不会随键盘弹出/收起动态更新，这是系统级的行为，CSS无法突破该限制。
• Chrome 108新增的Dynamic/Small/Large视口参数（如viewport-fit=dynamic）仅适配Chrome for Android等安卓平台，iOS Safari完全不支持这些特性，因此你尝试后无效果是预期结果。

替代实现方案（需结合JS） #

要模拟键盘弹出时页面高度自适应的效果，必须借助JavaScript配合CSS变量来实现，示例如下：

1. 监听可视区域变化，同步CSS变量

window.visualViewport?.addEventListener('resize', () => {
  document.documentElement.style.setProperty('--visual-viewport-height', `${window.visualViewport.height}px`);
});

2. 在CSS中使用该变量控制容器高度

.page-wrapper {
  min-height: var(--visual-viewport-height, 100vh);
}

通过window.visualViewportAPI可以实时获取键盘弹出后的可视区域高度，再通过CSS变量传递给页面元素，从而实现类似安卓端的视口收缩效果。

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