Coder Perfect

On touch devices, disable the double-tap “zoom” option in the browser.

Category: html

Tag: , , ,

Problem

I’d like to disable the double-tap zoom functionality on certain components in the browser (on touch devices), but not all zoom capabilities.

For example: One element can be tapped multiple times for something to happen. This works fine on desktop browsers (as expected), but on touch device browsers, it will zoom in.

Asked by Wouter Konecny

Solution #1

This approach does not appear to function in iOS Safari v12+ (as of 2020-08-04). Once I find a clear solution that supports iOS Safari, I will update this answer and erase this note.

CSS-only solution

Use the disable-dbl-tap-zoom class to add touch-action: manipulation to any element on which you want to disable double tap zoom:

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

(emphasis mine) from the touch-action docs:

This value is compatible with both Android and iOS.

Answered by Ross Allen

Solution #2

<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
etc...
</head>

That’s something I’ve recently used and it works great on the iPad. I haven’t tried it on an Android or other smartphone yet (because the website will be displayed on iPad only).

Answered by Kablam

Solution #3

I realize this is an old post, but I came across a solution that worked great for me. There’s no need for wacky meta tags or content zooming restrictions.

I’m not sure how cross-device it is, but it did precisely what I needed it to do.

$('.no-zoom').bind('touchend', function(e) {
  e.preventDefault();
  // Add your code here. 
  $(this).click();
  // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})

The usual tapping function will be disabled, and a typical click event will be called again. This disables zooming on the mobile device, but it otherwise works normally.

EDIT: This has now been time-tested and running in a couple live apps. It appears to be cross-browser and platform compatible. Unless you desire special behavior before the click event, the preceding code should serve as a copy-paste solution in most circumstances.

Answered by Rockster160

Solution #4

Because some individuals do not read the comments below a response, I simply wanted to make sure I answered my question correctly. So here’s the deal:

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(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);

This was not written by me; I simply tweaked it. The iOS-only version can be obtained here: https://gist.github.com/2047491 (Many thanks to Kablam)

Answered by Wouter Konecny

Solution #5

To deactivate double-tap zoom worldwide (on any element), use the following CSS:

  * {
      touch-action: manipulation;
  }

Thank you, Ross; my response extends his: https://stackoverflow.com/a/53236027/9986657

Answered by Jan

Post is based on https://stackoverflow.com/questions/10614481/disable-double-tap-zoom-option-in-browser-on-touch-devices