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

2024-11-13 22:43:55
推荐回答(2个)
回答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

回答2:

再头部加上:

"添加到主屏幕“后,全屏显示
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。