Disable Double-Tap "Zoom" Option in Browser on Touch Devices

Disable double-tap zoom option in browser on touch devices

I just wanted to answer my question properly as some people do not read the comments below an answer. So here it is:

(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);

I did not write this, i just modified it. I found the iOS-only version here: https://gist.github.com/2047491 (thanks Kablam)

How to disable double click zooming on iPad?

All you have to do is add a meta tag in your html code:

<meta 
 name='viewport' 
 content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

Disable double tap zoom on Safari iOS 13 +

You can add the below meta tag to stop zooming on ios devices.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>

a css fix:

body{
    touch-action: manipulation;
}

Hope is helps.

Disabling double tap zoom on Android web browsers, without viewport

Add the following meta. This will stop double-tap zoom in the majority of mobile browsers, but will stop it everywhere on your page - not just in your single div. It's all or nothing, I'm afraid.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

How to disable double tap zoom feature in Chrome 30 on Android (Nexus 10)

In future versions of Chrome for Android, the double tap will be removed when you have a viewport set. If you want to disable it for stable today, you will need to set user-scalable=no in your viewport.

This will disable zooming (which may be bad for accessibility) but should allow you to get all touch events.

IOS HTML disable double tap to zoom

The CSS property touch-action works for me. Tested on iOS 11.1.

button {
    touch-action: manipulation;
}

See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

---

Related Topics