实际移动端项目中遇到,本来在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'
})