移动端兼容性问题解决方案

1.IOS移动端click事件300ms的延迟相应

移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。

这是由于区分单机事件和双击屏幕缩放的历史原因造成的。

解决方式:

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块,tap事件也是为了解决在click的延迟问题
触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click,也可以通过绑定ontouchstart事件,加快事件的响应,解决300ms的延迟问题

2.h5底部输入框被键盘遮挡问题

当输入框在最底部,点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度

$(window).resize(function(){ 

  if($(document).height() < oHeight){

    $("#footer").css("position","static");

  }else{

    $("#footer").css("position","absolute");

  }

});

3.禁止ios和android用户选中文字

-webkit-user-select:none

4.一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发

cursor:pointer

5.在移动端修改难看的点击的高亮效果,iOS和安卓下都有效:

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

 

移动端兼容性问题解决方案

上一篇:hbuilder发布IOS采坑记录


下一篇:vue-中的-axios分装