Question

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

Answer 1

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

Answer 2

再头部加上：

<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

追问

android自带浏览器中浏览被遮挡了加这个吗？

追答

这个是去掉苹果机下的工具栏
安卓机的不占位置吧