Best IT Recipes

Disable the double-tap zoom feature in the browser on touch devices

I want to disable the double-touch zoom function on the specified elements in the browser (on touch devices), without disabling all zoom functions .

For example: one element can be knocked several times for something to happen. This works fine on desktop browsers (as expected), but it will increase in touchscreen browsers.

+72
html browser touch zoom
May 16 '12 at 8:13
source share
13 answers

I just wanted to answer my question correctly, as some people do not read the comments below the 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 changed it. I found the version only for iOS: https://gist.github.com/2047491 (thanks Kablam)

+28
Jun 06 '12 at 8:17
source share
 <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 have used this recently and it works great on the iPad. Not tested on Android or other devices (since the website will only display on the iPad).

+44
May 16 '12 at 8:17
source share

I know this might be old, but I found a solution that worked fine for me. No need for crazy meta tags and stop scaling content.

I'm not 100% sure this is a cross device but it worked exactly as I wanted.

 $('.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. })

This will simply disable the normal click function and then trigger the standard click event again. This prevents the scaling of the mobile device, but otherwise works as usual.

EDIT: Now it is time-tested and works in several real applications. It seems to be a 100% cross browser and platform. The above code should work as a copy-paste solution for most cases if you do not want to customize the behavior before the click event.

+35
Feb 26 '15 at 20:40
source share

Modern (as of April 2019) CSS-only solution

Add touch-action: manipulation to any element for which you want to disable double-clicking, as in the following disable-dbl-tap-zoom class:

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

From the docs regarding touch-action (my selection):

manipulation

Turn on pan and zoom gestures, but turn off additional non-standard gestures, such as double-tap to zoom .

This value works on Android and iOS.

+17
Nov 10 '18 at 4:35
source share

If you need a version that works without jQuery , I modified Wouter Konecny's answer (which was also created by modifying this entity by Johan Sundström ) to use vanilla JavaScript.

 function preventZoom(e) { var t2 = e.timeStamp; var t1 = e.currentTarget.dataset.lastTouch || t2; var dt = t2 - t1; var fingers = e.touches.length; e.currentTarget.dataset.lastTouch = t2; if (!dt || dt > 500 || fingers > 1) return; // not double-tap e.preventDefault(); e.target.click(); }

Then add an event handler to touchstart that calls this function:

 myButton.addEventListener('touchstart', preventZoom);
+12
Sep 29 '16 at 19:50
source share

You should set the css touch-action property to none , as described in this other answer https://stackoverflow.com/a/464829/

 .disable-doubletap-to-zoom { touch-action: none; }
+8
Dec 20 '17 at 6:44
source share

CSS to disable double-touch scaling globally (on any element):

  * { touch-action: manipulation; }

manipulation

Turn on pan and zoom gestures, but turn off additional non-standard gestures, such as double-tap to zoom.

Thanks Ross, my answer extends it: stack overflow

+4
15 Jan '19 at 22:35
source share

Simply preventing the default behavior of click , dblclick or touchend will disable the zoom feature.

If you already have a callback for one of these events, just call event.preventDefault() .

+1
Aug 24 '16 at 19:54
source share

This will prevent the possibility of double-clicking on elements in the "body", it 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 it also prevented my click event from firing on click several times, so I had to bind another event to trigger events with a few 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. } });

In touchstart, I added code to prevent scaling and cause 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
Mar 17 '17 at 15:22
source share

If someone like me who is experiencing this problem using Vue.js just adding .prevent will do the trick: @click.prevent="someAction"

0
Apr 23 '18 at 8:01
source share

I assume that I have an input area for the <div> container with text, sliders, and buttons in it, and you want to prevent accidental double clicks on this <div> . The following does not prevent the input area from scaling, and it does not involve double-tapping and scaling outside of my <div> . There are various options depending on the browser application.

I just tried it.

(1) For Safari on iOS and Chrome on Android, it is the preferred method. It works, with the exception of the Internet application on Samsung, where it disables double-clicking not on the full <div> , but at least on the elements that handle the taps. It returns return false , with the exception of the inputs text and range .

 $('selector of <div> input area').on('touchend',disabledoubletap); function disabledoubletap(ev) { var preventok=$(ev.target).is('input[type=text],input[type=range]'); if(preventok==false) return false; }

(2) If desired, double-clicking on the <div> is prohibited for the embedded Internet application on Android (5.1, Samsung), but it is forbidden to scale the <div> :

 $('selector of <div> input area').on('touchstart touchend',disabledoubletap);

(3) For Chrome on Android 5.1, disables double-clicking, does not block scaling, and does nothing about double-tapping in other browsers. Double-clicking <meta name="viewport" ...> annoying because <meta name="viewport" ...> seems like good practice.

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
-one
Aug 16 '17 at 13:58 on
source share

Using CSS Touch Events: None. Completly deletes all touch events. Just leaving it here in case someone has problems too, it took me 2 hours to find this solution, and this is just one line of CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

-one
Jan 09 '18 at 12:58
source share

Here we go

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

-2
Nov 02 '16 at 10:40
source share


More articles:


All Articles