移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法

最近在做app的时候,遇到一个很尴尬的问题。之前自己做的移动端也挺多的,却是没有出现过这样的问题。。
就是我们这个app登录页是有一个整体的背景图片的,通常我们做的时候,一般都是会在最外层的大盒子设置一下自适应宽高的背景图片。

分析原因：

当然这是没错的,浏览器上测试也是没问题的.但是当你用手机来测试的时候,键盘就会弹出了.这就导致我们本来占屏幕整个高度的body,
现在就只有一半了.所以自适应的背景图片也就矮了一半.看起来有点搞笑。

解决方法：

var winh        
window.onload = function() {
    winh = window.innerHeight
}
window.onresize = function() {
    document.getElementById("container").style.height = winh + 'px'
}

在页面加载的时候我们可以去获取浏览器窗口的视口高度，
在浏览器尺寸发生改变的时候我们给我们的背景盒子赋值之前的视口高度就可以了。

当然我这里用的是原生js
如果你用的是vue，可以用我下面的方法

<div class="main" :style="{ height: bodyHeight + 'px' }">
</div>
——————————————————————————————————————————————————————————————————————————————————
mounted(){
 this.bodyHeight=document.documentElement.clientHeight
}

所用的原理都是一样的，这里就不再重复解释了

以上就是移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~