Safari iPad : prevent zoom on double-tap

前端 未结 8 1480
独厮守ぢ
独厮守ぢ 2020-12-05 12:09

I\'m creating a site on Safari for iPad. I need to prevent the zoom on double-tapping event but I have two problems:

  • a double tap doesn’t generate any events,
8条回答
  •  北海茫月
    2020-12-05 12:21

    Here's a jQuery plugin I wrote for the same purpose - selectively disabling double-tap zoom on given page elements (in my case, navigation buttons to flip pages) I want to respond to every tap (including double-tap) as a normal click event, with no iOS "touch magic".

    To use it, just run something like $('.prev,.next').nodoubletapzoom(); on the elements you care for. (Edit: now also ignores pinches)

    // jQuery no-double-tap-zoom plugin
    
    // Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy!
    
    (function($) {
      var IS_IOS = /iphone|ipad/i.test(navigator.userAgent);
      $.fn.nodoubletapzoom = function() {
        if (IS_IOS)
          $(this).bind('touchstart', function preventZoom(e) {
            var t2 = e.timeStamp
              , t1 = $(this).data('lastTouch') || t2
              , dt = t2 - t1
              , 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
            $(this).trigger('click').trigger('click');
          });
      };
    })(jQuery);
    

提交回复
热议问题