发表新帖
发表新帖

Disable double-tap “zoom” option in browser on touch devices

后端 未结
关注
14 1264
-上瘾入骨i
-上瘾入骨i 2020-11-28 02:58

I want to disable the double-tap zoom functionality on specified elements in the browser (on touch devices), witho

相关标签:
14条回答
  • 伪装坚强ぢ
    2020-11-28 03:54 
    <head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
etc...
</head>

    I've used that very recently and it works fine on iPad. Haven't tested on Android or other devices (because the website will be displayed on iPad only).

    0 讨论(0)
  • 星月不相逢
    2020-11-28 03:57

    This will prevent double tap zoom on elements in 'body' this can be changed to any other selector

    $('body').bind('touchstart', function preventZoom(e){
            var t2 = e.timeStamp;
            var t1 = $(this).data('lastTouch') || t2;
            var dt = t2 - t1;
            var fingers = e.originalEvent.touches.length;
            $(this).data('lastTouch', t2);
            if (!dt || dt > 500 || fingers > 1){
                return; // not double-tap
            }
            e.preventDefault(); // double tap - prevent the zoom
            // also synthesize click events we just swallowed up
            $(e.target).trigger('click');

});

    But this also prevented my click event from triggering when clicked multiple times so i had to bind a another event to trigger the events on multiple clicks

    $('.selector').bind('touchstart click', preventZoom(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
      // Handle touchstart event.
    } else if(e.type == "click") {
      // Handle click event.
    }
});

    On touchstart i added the code to prevent the zoom and trigger a click.

    $('.selector').bind('touchstart, click', function preventZoom(e){
            e.stopPropagation(); //stops propagation
            if(e.type == "touchstart") {
                // Handle touchstart event.
                var t2 = e.timeStamp;
                var t1 = $(this).data('lastTouch') || t2;
                var dt = t2 - t1;
                var fingers = e.originalEvent.touches.length;
                $(this).data('lastTouch', t2);


                if (!dt || dt > 500 || fingers > 1){
                    return; // not double-tap
                }

                e.preventDefault(); // double tap - prevent the zoom
                // also synthesize click events we just swallowed up
                $(e.target).trigger('click');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });
    0 讨论(0)
 看不清?
提交回复
热议问题