安卓手机上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;
            }
        },

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

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