移动端如何避免触发虚假的window.resize事件？

JS检测与过滤方案 #

1. 视口尺寸变化+输入框聚焦状态过滤 #

移动端键盘弹出时，通常仅改变视口高度，且此时必有输入类元素处于聚焦状态。基于这个特性可以过滤"虚假"resize事件：

// 初始化记录初始视口尺寸
let initialViewport = {
  width: window.innerWidth,
  height: window.innerHeight
};

window.addEventListener('resize', () => {
  const currentWidth = window.innerWidth;
  const currentHeight = window.innerHeight;
  // 判断当前是否有输入框/文本框聚焦
  const isInputFocused = ['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName);

  // 仅当宽度变化，或无输入框聚焦时执行真实resize逻辑
  if (currentWidth !== initialViewport.width || !isInputFocused) {
    // 此处写入你的resize处理代码
    console.log('执行真实窗口尺寸变更逻辑');
    // 更新初始视口尺寸
    initialViewport.width = currentWidth;
    initialViewport.height = currentHeight;
  }
});

2. 利用视觉视口（Visual Viewport）API检测 #

现代浏览器支持visualViewport对象，能精准反映用户可见的视口区域。键盘弹出时视觉视口高度会缩小，结合聚焦状态可有效过滤：

window.visualViewport.addEventListener('resize', () => {
  const isInputFocused = ['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName);
  if (!isInputFocused) {
    // 处理真实的视口变化
    console.log('执行真实视口尺寸变更逻辑');
  }
});

注意：该API兼容Chrome 62+、Safari 13+及大部分现代移动端浏览器，兼容老旧设备建议搭配第一种方案。

CSS辅助方案 #

若页面场景允许固定高度，可通过CSS避免键盘弹出时触发页面resize：

1. 固定页面高度，避免视口重排 #

设置根元素为固定高度，让键盘弹出时直接覆盖页面而非改变视口尺寸：

html, body {
  height: 100vh;
  overflow: hidden;
}
/* 需滚动内容放在独立容器内 */
.page-content {
  height: 100%;
  overflow-y: auto;
}

2. 禁止页面缩放，减少意外resize #

移动端用户缩放页面也会触发resize，可通过CSS禁止：

html {
  touch-action: pan-x pan-y;
  user-select: none;
}

额外注意事项 #

• 部分Android设备横屏状态下，键盘弹出可能同时改变视口宽度，建议结合输入框聚焦状态做双重判断；
• 测试不同移动端浏览器（微信内置浏览器、Safari、Chrome）的行为，部分浏览器存在特殊resize触发逻辑；

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