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

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

在页面每次加载后获取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
  • 本文分类:CSSvue 项目实战
  • 本文标签:暂无标签
  • 流行热度:已超过 117 人围观了本文
  • 发布日期:2019年12月26日 - 9时48分59秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码