安卓手机上H5页面，输入框唤起键盘，输入框被遮挡问题解决记录

问题描述：

使用fixed定位的div,在安卓机型上会出现div被顶上去的情况，在ios机型上不会出现此原因。

经过网上查找，根本原因是ios和安卓的键盘的加载方式不一样

在网上查找了很多解决方法，说到根本就是不用fixed定位，再或是通过监听input框改变除了输入框其他元素的高度

我在这里运用了第一种方式，当检测到安卓机型的点击事件，就把fixed定位改成了static定位,

.showHide { position: static !important; }

我用的vue框架，用了class绑定存储一个可变的数组

<div class="sheetnomal" :class="{ sheetnomalchange: sheetnomalchange, showHide: showHide, }" >

通过监听input的点击事件，从navigator中去除ua，判断是否包含andriod的字样，如果有就改变他的showHide

getKeywordsHeight() { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; if (isAndroid) { this.showHide = true; } },

并且在失焦的时候改回原来的值。

希望我的经验帮助到遇到相同问题的同学，但是这个问题还会出现其他情况，后面有时间我也会找到一个更好的方式