移动端300ms特殊处理

移动端的特殊处理

300ms延迟的解决方法

  • 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

1.fastclick

  • 解决移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。
  • fastclick.js的原理是:FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉。
使用方法
1. 安装:
命令行:npm install fastclick

CDN:<script crossorigin="anonymous" integrity="sha384-qSrEYLMHSuUya7HioxgwmVKxoqyVbT2Xmu87cJyVwFm1oq4M6Tz5lcdiFrOrS93l" src="https://lib.baomitu.com/fastclick/1.0.6/fastclick.min.js"></script>
2.使用fastclick
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

2.meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
3. touch-action
/* E11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件 */
*{touch-action: manipulation}
上一篇:海思AI芯片(Hi35XX): 图像jpg转.bgr


下一篇:202 移动端常用开发插件:fastclick ,Swiper ,lsuperslide,iscroll,zy.media.js