移动端300毫秒延迟的由来:

  双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。

  解决方案:

          

    1、设置meta标签禁止缩放

                    @1  <meta name="viewport" content="user-scalable=no"/>

<meta name="viewport" content="initial-scale=1, maximum-scale=1">/

表明这个页面是不可缩放的,那双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

这个方案有一个缺点,就是必须通过完全禁用缩放来达到去掉点击延迟的目的,然而完全禁用缩放并不是我们的初衷,我们只是想禁掉默认的双击缩放行为,这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下,我们还是希望页面能通过双指缩放来进行缩放操作,比如放大一张图片,放大一段很小的文字。

                    @2  <meta name="viewport" content="width=device-width"/>

一开始,为了让桌面站点能在移动端浏览器正常显示,移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度,而是要比设备浏览器视窗宽度大,通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。 因为双击缩放主要是用来改善桌面站点在移动端浏览体验的,而随着响应式设计的普及,很多站点都已经对移动端坐过适配和优化了,这个时候就不需要双击缩放了,如果能够识别出一个网站是响应式的网站,那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签,那浏览器就可以认为该网站已经对移动端做过了适配和优化,就无需双击缩放操作了。

这个方案相比方案一的好处在于,它没有完全禁用缩放,而只是禁用了浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。

     

             2、FastClick

<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>

                         $(function() {

                 FastClick.attach(document.body);

            })或者

            if ('addEventListener' in document) {

                document.addEventListener('DOMContentLoaded', function() {

                    FastClick.attach(document.body);

                }, false);

            }

          3、可以使用zepto.js的tap事件替代click,Zepto 缺少合适的高度计算函数,在项目开发中发现第三方插件和 Zepto 有冲突,维护多套代码很不容易

          4、