解决安卓系统H5页面fixed定位失效，底部固定被软键盘顶起的情况

问题描述

开发的 h5 页面嵌套在 app 中，点击 input 输入框后调起系统自带软键盘。其中 ios 系统正常展示，fixed 布局正常，底部 fixed 固定被软键盘遮挡（如图右）。android 系统调起软键盘后底部固定跟随软键盘一并移动。
ps: 个人角度看 android 中的效果也属正常，不影响功能。测试将情况反馈给产品后产品要求按照 ios 系统展示的形式修改。

问题原因

在 ios 中调起系统键盘后 clientHeight 高度同之前一样不变，而在 android 中调起系统键盘后 clientHeigth 会被压缩，关闭键盘后 clientHeigth 又会恢复成之前高度，所以 android 底部固定会因为视图区高度的变化而跟着变化。

解决方案

这里要解决的问题是 android 系统中底部 fixed 不会被软键盘影响从而遮挡，所以可以通过监听页面 clientHeight 的高度变化去隐藏底部的 fixed 固定来解决这种特殊情况。
代码如下↓

mounted() {
    this.docmHeight = document.documentElement.clientHeight || document.body.clientHeight;
    this.bottomBtnHeight = document.querySelectorAll('.bottom-btn')[0].offsetHeight;
    window.addEventListener('resize', this.getShowHeight)
  },

methods: {
    getShowHeight() {
      this.showHeight = document.documentElement.clientHeight || document.body.clientHeight
      const diff = this.docmHeight - this.showHeight
      if (this.showHeight < this.docmHeight && diff > 100) {
        // 隐藏
        document.querySelectorAll('.bottom-btn')[0].style.display = 'none';
        document.querySelectorAll('.wrap')[0].style.bottom = 0;
      } else {
        // 显示
        document.querySelectorAll('.bottom-btn')[0].style.display = 'block';
        document.querySelectorAll('.wrap')[0].style.bottom = `${this.bottomBtnHeight}px`;
      }
    },
}