0%

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

发布于 / 分类: CSS,vue 项目实战 / 暂无评论 / 阅读量 124

最后更新于 2019年12月26日

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

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

注意

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

iPhone手机端点击form表单元素自动放大 图片模糊过度原理(QQ空间图片过度效果)
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao