彻底根治兼容性顽疾：输入框输入被遮挡，固定定位div被弹起的终极解决指南

各位技术大咖，对于兼容性问题，是不是也曾抓狂不已？尤其是输入框输入时被遮挡、固定定位div被弹起的顽疾，更是令人头疼不已。今天，我就来献上一份彻底解决这些兼容性问题的终极指南，让你从此告别烦恼。

输入框被遮挡：

造成这种问题的罪魁祸首，往往是网站的输入框位于屏幕底部，而键盘弹出时，会将输入框遮挡住。为了解决这一问题，我们可以采用以下策略：

1. 监听输入框的 focus 事件： 当输入框获得焦点时，判断键盘是否弹出，如果弹出，则将页面向下滚动一定距离，让输入框露出。
2. 使用 position: fixed 定位输入框： 将输入框定位为 fixed，使其不受键盘弹出影响。

固定定位 div 被弹起：

当键盘弹出时，固定定位的 div 可能会被弹起在键盘之上。解决办法如下：

1. 监听键盘的弹出事件： 当键盘弹出时，隐藏固定定位的 div。
2. 键盘收起时显示 div： 当键盘收起时，再将隐藏的 div 显示出来。

示例代码：

// 监听输入框获得焦点事件
document.querySelector('input').addEventListener('focus', () => {
  // 判断键盘是否弹出
  if (window.visualViewport.keyboard.layout === 'expanded') {
    // 键盘弹出，向下滚动页面
    window.scrollBy(0, window.visualViewport.keyboard.height);
  }
});

// 监听键盘弹出事件
window.addEventListener('resize', () => {
  // 键盘弹出
  if (window.visualViewport.keyboard.layout === 'expanded') {
    // 隐藏固定定位的 div
    document.querySelector('.fixed-div').style.display = 'none';
  }
});

// 监听键盘收起事件
window.addEventListener('focus', () => {
  // 键盘收起
  if (window.visualViewport.keyboard.layout === 'hidden') {
    // 显示固定定位的 div
    document.querySelector('.fixed-div').style.display = 'block';
  }
});

结语：

按照以上步骤操作，即可彻底解决输入框被遮挡、固定定位 div 被弹起的兼容性问题。告别兼容性烦恼，让你的网站体验更顺畅！