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
再头部加上:
"添加到主屏幕“后,全屏显示
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。