随着手机的普及,移动端的开发也成了一个重要的方向,但由于设备的不统一会造成一些兼容性问题
- 在ios手机上,对于一些页面长度刚好是手机的长度。键盘弹起收起后,页面不会回到原来的长度。这个时候页面底部会有一些空白和fix的按钮不能点击。解决办法:input失去焦点是,页面滑动
item.addEventListener('blur',()=>{
window.scroll(0,0);
})
- 在某些ios、qq内置浏览器,键盘弹出收,fix的元素位置错乱。解决办法:聚焦的时候fix隐藏或者static;失去焦点的时候fix显示或者fix。
vItem.addEventListener('click',function(){
clearTimeout(timerFcus);
timerFcus=setTimeout(function(){
btn.style.display="none";
},300)
})
vItem.addEventListener('blur',function(){
clearTimeout(timerBlur);
timerBlur=setTimeout(function(){
btn.style.display="block";
},200)
})
- 在android手机键盘弹出,input被遮住。用户不能看到输入的内容,只能滑动页面才能看见。解决办法:键盘弹出,页面向上滑动。
var getPos=function (obj){
var l=0;
var t=0;
while(obj)
{
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left: l, top: t};
};
vItem.addEventListener('click',function (e) {
if(isAndroid){
var that=this;
clearTimeout(timer);
timer=setTimeout(function(){
var h=getPos(that).top;
document.documentElement.scrollTop=h-50;
document.body.scrollTop=h-50;
},500)
}
});