H5+原生app项目键盘弹起背景被上推、挤压的解决方法

最新推荐文章于 2024-05-27 16:28:47 发布

lamCCH

最新推荐文章于 2024-05-27 16:28:47 发布

阅读量2.1k

点赞数 5

分类专栏： vant 移动项目应用 css 文章标签： vue css3 javascript

本文链接：https://blog.csdn.net/chenlim87/article/details/108234974

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

vant

6 篇文章 0 订阅

订阅专栏

移动项目应用

3 篇文章 0 订阅

订阅专栏

最近做了原生app嵌套H5的手机端应用。因为是第一次做手机端应用，遇到问题挺多。现总结下登录页遇到的问题。
正常样式如图：
在这里插入图片描述

当点击输入框，键盘会弹起，此时样式就错乱了。输入框和底部的背景图会上移，遮挡住头部背景文字。给输入框加了高度之后，调整样式，输入框正常了，但底部的背景图还是被挤压上来了。然后修改了样式后还是不行。
在这里插入图片描述

通过样式查看，背景图被挤压的原因是因为键盘弹起时改变了屏幕的可视区域大小，所以底部的div就上来了。

既然键盘弹出时会改变屏幕大小，那我们在键盘弹起时不让它改变不就可以了吗？

在mounted钩子函数里监听屏幕大小变化

// 获取当前可视区域的高度
let height = document.documentElement.clientHeight
  window.onresize = () => { // 在页面大小发生变化时调用
    // 把获取到的高度赋值给根div
	  document.getElementById('loginMain').style.height = height + 'px'
  }