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

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

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

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

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

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

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

loginMain就是登录页面的根元素。

OK，问题解决！

参考github