手机文件html工具栏,有的手机浏览器底部工具栏会遮挡内容怎么调？样式是这样的，html,body{height:100%}...

满意答案

royalhayga

2015.11.25

采纳率：57%    等级：10

已帮助：618人

function getBrowserInterfaceSize() {

var pageWidth = window.innerWidth;

var pageHeight = window.innerHeight;

if (typeof pageWidth != "number") { //在标准模式下面

if (document.compatMode == "CSS1Compat" ) {

pageWidth = document.documentElement.clientWidth;

pageHeight = document.documentElement.clientHeight;

} else {

pageWidth = document.body.clientWidth;

pageHeight = window.body.clientHeight;

}

}

document.body.style.height = pageHeight + 'px'

}

通过这个方法就可以获取在手机浏览器去掉头部和底部的实际可用高度，并绑定在body上，其他的可以相对于body来设置高度，这样就不会超出可是高度，不会被底部遮挡。

demo github.com/a2337230/wapHeight.git追答：

这个是去掉苹果机下的工具栏

安卓机的不占位置吧

00分享举报