问题描述:
使用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;
}
},
并且在失焦的时候改回原来的值。
希望我的经验帮助到遇到相同问题的同学,但是这个问题还会出现其他情况,后面有时间我也会找到一个更好的方式