移动端浏览器click的300ms延迟问题

时间 2019-11-09

原文原文链接

　　此时，彻底禁止缩放了，例如，想放大查看某张图片也是不被容许的javascript

　　适用场景：无需用户放大查看的元素页面、游戏页面等（注：ios10之前，上面是有效的）html

1 <meta name="viewport" content="width=device-width">

　　它只是去除了双击缩放，缩放功能并不是被彻底禁用，但用户仍可使用双指缩放。java

通常都是联合着一块儿写：ios

1 <meta
2       name="viewport"
3       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
4 />

　　从IOS10开始，苹果开始容许用户强制双击缩放（其实，并非均可以缩放，好像只是针对图片，会有一个双击放大再次复原的效果） => 那么，能够用上面这条meta语句应付了，至于还想禁止双指缩放，则须要js了。git

　　触摸动做也常常用于彻底解决由支持双击缩放手势引发的点击事件的延迟。github

1 html {
2   touch-action: manipulation; // 值为none时，禁用元素（及其不可滚动的后代）上的全部手势
3 }

　　manipulation只容许进行滚动和持续缩放操做。启用平移和缩小缩放手势，但禁用其余非标准手势，例如双击以进行。浏览器

　　FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。spa

　　FastClick 使用方法: 在 window load 事件以后，在 <body> 上调用 FastClick.attach() 。scala

 
window.addEventListener( "load", function() {
   FastClick.attach( document.body );
}, false ); 
  