刚遇到的问题,H5 页面在安卓手机上点击输入框页面变形,网上找了好几个方法都太繁琐还没有根本的解决问题,最后自己脑洞大开试了一个方法终于完美解决,话不多说,直接上代码。
首先展示下问题页面:(注意看页面图片已经变形了)
1.图一,是安卓设备上点击输入框键盘弹起后页面变形的效果(重点看背景图,背景图变形了)
2.图二,是ios设备上点击输入框键盘弹起后页面没有变形的效果图
重点来了:解决方式如下:
第一步:给页面容器给个固定高度,最好的方式就是动态绑定高度,如下:
<div class="dow-box" :style="{height:bgHeight}"></div>
我的布局方式如图:
我的css样式:如图