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

·  阅读 669

实际移动端项目中遇到,本来在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'
    })
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改