iOS端键盘弹出时视口高度追踪及布局适配方案咨询

嗨，我刚好碰到过不少类似的iOS布局适配问题，你描述的场景太典型了——用100dvh做全屏布局，顶部固定导航栏、底部固定页脚，中间内容区靠overflow-auto滚动，但iOS Safari唤起键盘时，不仅会把内容盖住，整个应用还会莫名上移，确实头疼！

你提到的用window.visualViewport?.height + window.visualViewport?.offsetTop来计算实际可用视口高度的思路，绝对是目前解决这个问题的靠谱方案之一。我来帮你把这个方案补全落地：

首先，你需要把计算出来的实时视口高度同步到CSS变量里，比如命名为--app-height。然后给你的根容器（或者中间滚动区域的父容器）设置样式：

height: var(--app-height);
max-height: var(--app-height);
transform: translateZ(0); /* 加这个是为了开启硬件加速，避免布局更新时的滚动闪烁或偏移 */

接下来要做的是实时监听视口变化，动态更新这个CSS变量，比如写一段简单的JS逻辑：

function updateAppHeight() {
  const viewport = window.visualViewport;
  if (!viewport) return;
  const actualHeight = viewport.height + viewport.offsetTop;
  document.documentElement.style.setProperty('--app-height', `${actualHeight}px`);
}

// 页面加载时初始化一次
window.addEventListener('load', updateAppHeight);
// 监听视口的 resize 和 scroll 事件，实时更新
window.visualViewport?.addEventListener('resize', updateAppHeight);
window.visualViewport?.addEventListener('scroll', updateAppHeight);

为什么这个方法能解决问题呢？因为iOS Safari的dvh单位在键盘弹出时不会自动调整，而visualViewport对象能精准获取当前屏幕可见区域的实际高度，加上offsetTop是为了补偿键盘弹出时视口的上移量，这样计算出来的高度就是应用真正能用到的空间，固定的头部和底部就不会被键盘遮挡，中间的滚动区域也能保持正确的可滚动高度。

内容来源于stack exchange