【前端】Android 键盘顶起H5元素的问题

我写文章的目的主要是做个记录和锻炼自己的写作能力，而且我入门前端时间比较短，如果有什么问题，欢迎指教！

最近开发H5应用，遇到了Android键盘把固定元素顶起的问题。我的页面底部固定了几个元素，使用的是 fixed 定位，在iOS这边没有问题，但是在android端，一旦用户输入的时候，键盘就会把元素向上顶。

通过调试发现，键盘弹起的时候整个window的高度都会变化，所以采用fixed也无效。所以，我考虑的就是监听键盘的弹出，然后当键盘弹起的时候隐藏底部元素，键盘收起的时候将元素显示出来。

这个方法试验是可行的，但是目前有多个页面，如果每个页面都要监听一遍，就会重复很多无用的代码。因为我使用的react开发，那么使用一个通用的组件做这件事情就好。

• 首先定义一个通用组件，用来包裹需要显示的底部元素

export const PageBottom: React.FC<{
  children: ReactChild | ReactChild[];}> = (props) => {
 return <div className="page-bottom">
    {
      props.children
    }
  </div>
}

• 然后添加css 代码

.board-show .page-bottom {
  display: none;   
}

• 然后监听键盘的变化，同键盘的弹起和收起，来修改root元素的class。

// 在应用的index 文件里面调用这个方法
function listenKeybordAndroid() {
  const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const root = document.querySelector("#root");
  window.onresize = function () {
    // 键盘弹起与隐藏都会引起窗口的高度发生变化
    let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (resizeHeight < originHeight) {
      // 当软键盘弹起，在此处操作
      root?.classList.add("board-show");
    } else {
      // 当软键盘收起，在此处操作
      root?.classList.remove("board-show")
    }
  }
}

结论： 我目前使用这个方法可以很好的解决我的问题，不知道对于这个问题，有没有更好的解决方案