如何在iOS中用JavaScript/jQuery计算键盘高度或实际视口高度？

其实在iOS里不是完全没办法实现，只是它的行为和Android不一样——确实不会触发$(window).resize()，但我们可以利用Web API的特性来搞定。

一、首选方案：使用Visual Viewport API（iOS 11+支持） #

这个API是专门用来处理视觉视口变化的，键盘弹出/收起时会直接改变视觉视口的高度，完美适配iOS的情况。你可以监听它的resize事件来计算键盘高度，或者直接获取实际可用的视口高度：

// 监听视觉视口的尺寸变化
window.visualViewport.addEventListener('resize', () => {
  // 获取当前实际可用的视口高度（已经排除键盘占用的空间）
  const actualViewportHeight = window.visualViewport.height;
  // 计算键盘高度：原始窗口高度减去当前视觉视口高度
  const keyboardHeight = window.innerHeight - actualViewportHeight;
  
  console.log('当前实际视口高度:', actualViewportHeight);
  console.log('键盘高度:', keyboardHeight);
});

二、结合输入框焦点事件做精准监听 #

如果只需要在用户激活输入框时获取键盘高度，可以结合focusin和focusout事件，配合延迟确保键盘完全弹出：

// 保存初始的窗口高度
let originalWindowHeight = window.innerHeight;

// 监听输入框聚焦事件
document.addEventListener('focusin', (event) => {
  // 只处理输入框和文本域
  const target = event.target;
  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
    // 延迟100ms，等待键盘完全弹出后再计算
    setTimeout(() => {
      const currentViewportHeight = window.visualViewport.height;
      const keyboardHeight = originalWindowHeight - currentViewportHeight;
      console.log('键盘高度:', keyboardHeight);
    }, 100);
  }
});

// 监听输入框失焦事件，重置初始高度
document.addEventListener('focusout', () => {
  originalWindowHeight = window.innerHeight;
});

关键注意点 #

• 不要用window.innerHeight来判断键盘弹出后的视口高度，iOS中这个值不会随键盘弹出改变，而visualViewport.height才是实际可用的空间高度。
• Visual Viewport API从iOS 11开始支持，现在iOS 11以下的版本用户占比极低，这个方案基本可以覆盖绝大多数场景。
• 延迟setTimeout是为了避免键盘还没完全弹出就计算高度，导致数值不准确。

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