移动端300ms特殊处理

Posted 2020-11-27 zhaoxinran997

移动端的特殊处理

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}