木灵鱼儿

木灵鱼儿

阅读:938

最后更新:2019/12/26/ 9:48:59

关于手机端虚拟键盘压缩页面高度的解决办法

手机端只要有输入框,弹出虚拟键盘后,一般来说都会压缩整个页面的高度,这就导致了一个问题,如果浮动于底部的标签就会被压上来,以及一些根据页面高度百分比定位的元素错位,解决这个问题目前我就只有一个办法: 固定整个页面的高度

在页面每次加载后获取window的innerHeight高度,然后手动给body设置这个固定的px值,并将这个值储存起来,然后再加一个window的resize事件,当页面被压缩,该事件就会触发,此时我们就判断,如果此时的windw的innerHeight高度小于之前的值,那么就将浮动底部的元素隐藏起来.

注意

window.innerHeight和document.body.clientHeight的高度在overflow: hidden;的情况下才是一致的,你需要给body,html元素加上这个css,原因是因为手机端高度会自动加上滚动条,一般window.innerHeight会大body高度20px,所以为了一致性,需要加上这个overflow: hidden;

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 938

相关文章

目录树