H5解决安卓环境下点击输入框页面(图片)变形问题

刚遇到的问题，H5 页面在安卓手机上点击输入框页面变形，网上找了好几个方法都太繁琐还没有根本的解决问题，最后自己脑洞大开试了一个方法终于完美解决，话不多说，直接上代码。
首先展示下问题页面：（注意看页面图片已经变形了）

1.图一，是安卓设备上点击输入框键盘弹起后页面变形的效果（重点看背景图，背景图变形了）

     

2.图二，是ios设备上点击输入框键盘弹起后页面没有变形的效果图 

重点来了：解决方式如下：

第一步：给页面容器给个固定高度，最好的方式就是动态绑定高度，如下：

 <div class="dow-box" :style="{height:bgHeight}"></div>

我的布局方式如图：

我的css样式：如图