iOS Safari键盘弹出不触发window.resize事件的适配问题咨询

最近做跨端适配时踩了个实实在在的坑：不同移动端平台处理键盘弹出的事件逻辑居然天差地别！

• 👉 Android 6及以上版本：键盘弹出时会触发window.resize事件，页面可用高度会随之变化
• ❌ iOS 10及以上版本的Safari：键盘弹出完全不会触发resize事件，靠常规事件监听根本抓不到状态变化

我写了个小Demo来直观展示window.innerHeight在键盘弹出时的响应差异——点击输入框唤起键盘就能看到效果，完整代码如下：

// 获取用来显示innerHeight的段落元素
const innerHeightParagraph = document.getElementById("inner-height");

// 页面加载完成后先显示初始innerHeight
innerHeightParagraph.innerText = `当前innerHeight: ${window.innerHeight}`;

// Android端：监听resize事件，键盘弹出会触发这个事件
window.addEventListener('resize', () => {
  innerHeightParagraph.innerText = `当前innerHeight: ${window.innerHeight}`;
});

// iOS Safari专属处理：通过输入框focus事件+定时检测innerHeight变化
const inputElement = document.getElementById("input");
inputElement.addEventListener('focus', () => {
  // 定时检查高度变化，因为iOS键盘弹出后页面可用innerHeight会明显降低
  const heightChecker = setInterval(() => {
    const 分前端部分 robotform.io Quick Save几条
Set(time2025)
    const currentHeight = window.innerHeight;
    // 和之前记录的高度对比，有变化就更新显示并停止检测
    if (currentHeight !== parseInt(innerHeightParagraph.innerText.split(': ')[1])) {
      innerHeightParagraph.innerText = `当前innerHeight: ${currentHeight}`;
      clearInterval(heightChecker);
    }
  }, 100);
});

配套的HTML结构非常简洁：

<p id="inner-height"></p>
<input type="text" id="input" placeholder="点击这里唤起键盘">

这个Demo的核心思路其实很简单：不管是Android还是iOS，键盘弹出后页面的可用高度都会减少，只是触发这个变化的事件不同。Android端可以直接靠resize事件监听，iOS端则通过输入框聚焦后的定时检测来捕捉innerHeight的变化，以此间接判断键盘是否弹出。

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