移动端开发BUG总结

做过移动端开发的都知道:IOS系统下input聚焦时,键盘弹出导致样式紊乱。
这种情况的出现是由于IOS系统对fixed定位支持不好导致的。
接下来我会分享亲试过的两个BUG解决方案…

1IOS 11.2.2以下系统键盘弹起遮挡输入框的问题

首先要修改底部定位元素fixed为absolute
接下来JS未输入框绑定聚焦事件,当输入框聚焦时,执行如下代码:

1
2
3
4
5
6
7
8
var str= navigator.userAgent.toLowerCase();
var ver=str.match(/cpu iphone os (.*?) like mac os/); //ver是当前IOS系统版本号
var arr=ver[1].replace(/_/g,".").split(0);
if((arr[0]<11)||(arr[0]>11&&arr[2]>1)){
setTimeout(function(){
$(window).scrollTop(1000);
},500);
}

这个解决方法还是会有一个小问题,那就是键盘弹起时不太流畅
当然,网上还有很多方法。目前来说我个人认为这个是最优解决方案了
如果哪位大神还有其他优化方法,欢迎分享

2键盘弹起顶部输入框(例如:textarea)焦点位置不准确

解决方案(以jQuery为例),代码如下:

1
$(输入框定位元素).css({top:$(window).scrollTop()+"px"});

如果觉得有用,别忘了请老师喝水哦

扫一扫,请老师喝水