移动端浏览器底部栏遮挡网页底部内容问题处理

实际移动端项目中遇到，本来在pc端浏览器以及app内显示正常的h5页面，当用手机浏览器打开的时候，浏览器本身的底部栏会遮挡住H5页面的底部操作栏
处理方式如下：
1）首先获取移动端浏览器窗口的高度

   getWindowConfig() {
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      if (typeof windowWidth !== 'number') {
        if (document.compatMode === 'CSS1Compat') {
          windowWidth = document.documentElement.clientWidth;
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowWidth = document.body.clientWidth;
          windowHeight = window.body.clientHeight;
        }
      }
      return {
        windowWidth: windowWidth,
        windowHeight: windowHeight
      }
    }

2）页面加载完成后冲子容器宽高使其指填空可视区域的高度范围
** 这里用的vue所以代码可以放在$nextTick里执行，当上次渲染完成再去调整

    this.$nextTick(i => {
      let pageInfo = this.getWindowConfig()
      document.getElementById('ActiveIframe').style.height = (pageInfo.pageHeight - 46) + 'px'
      document.getElementById('frameContainer').style.height = (pageInfo.pageHeight - 46) + 'px'
    })