解决ios双击页面上移问题

 做webapp时，ios有个默认双击事件，会缩放页面，并将当前点击的位置居中到屏幕，本来也没什么，但是当页面中有fixed定位的元素时，这时候你就会神奇的发现，fixed元素所见不所得了！

还有就是页面会上移...

 

//解决ios双击页面上移问题

//在项目中测试不紧input/button这些表单控件有这个问题，p,div等也有问题，于是乎就直接在body开刀了

(function()

{

    var agent = navigator.userAgent.toLowerCase();        //检测是否是ios

    var iLastTouch = null;                                //缓存上一次tap的时间

    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)

    {

        document.body.addEventListener('touchend', function(event)

        {

            var iNow = new Date()

                .getTime();

            iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;

            var delta = iNow - iLastTouch;

            if (delta < 500 && delta > 0)

            {

                event.preventDefault();

                return false;

            }

            iLastTouch = iNow;

        }, false);

    }



})();



//下面是国外coder给的解决方案
//http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads

(function($){

    // Determine if we on iPhone or iPad

    var isiOS = false;

    var agent = navigator.userAgent.toLowerCase();

    if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){

           isiOS = true;

    }

 

    $.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){

        var eventName, action;

        delay = delay == null? 500 : delay;

        eventName = isiOS == true? 'touchend' : 'click';

 

        $(this).bind(eventName, function(event){

            var now = new Date().getTime();

            var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;

            var delta = now - lastTouch;

            clearTimeout(action);

            if(delta<500 && delta>0){

                if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){

                    onDoubleTapCallback(event);

                }

            }else{

                $(this).data('lastTouch', now);

                action = setTimeout(function(evt){

                    if(onTapCallback != null && typeof onTapCallback == 'function'){

                        onTapCallback(evt);

                    }

                    clearTimeout(action);   // clear the timeout

                }, delay, [event]);

            }

            $(this).data('lastTouch', now);

        });

    };

})(Zepto);



//usage:

$(selector).doubletap(

    /** doubletap-dblclick callback */

    function(event){

        alert('double-tap');

    },

    /** touch-click callback (touch) */

    function(event){

        alert('single-tap');

    },

    /** doubletap-dblclick delay (default is 500 ms) */

    400

);

//下面是国外coder给的解决方案--end

//解决ios双击网面上移问题--end