12

How can we disable "double tap to zoom" on Safari iOS 13+ mobile?

Sometimes it zooms, sometimes not. i feel it may only work on specific HTML-elements.

And i read that "double tap to zoom" should be disabled on iOS 13 by default and only pinch-zoom should work, but that's not the case.

oygen
  • 467
  • 1
  • 7
  • 13

4 Answers4

19

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.

Kevin
  • 1,241
  • 7
  • 20
  • try this css targeting body of the html. body{ touch-action: manipulation; } Updated the fiddle. – Kevin Jan 14 '20 at 12:53
  • not sure what the implications might be to attach it to the whole body, but i could try to find which elements that are effected by the double-tap issue and use "touch-action: manipulation" on those. – oygen Jan 17 '20 at 14:14
  • 7
    Blocking zoom by using user-scalable=0 entirely is an issue for my app, I just need to block the double tapping, not the zoom itself. Does anyone have any hacks that actually work for iOS 13+? I've tried to prevent default and stop propagation on my clicks, setting touch action to manipulation and a bunch of other things to no avail. – Guillaume Richard Sep 11 '20 at 05:37
  • 1
    Wow! I've just gotten used to Apple trying to take control away from me for things like this that I was surprised this works! (Yes I understand the accessibility issues around zooming in general and why they do it). – Simon_Weaver Mar 12 '21 at 00:35
  • @Simon_Weaver - Exactly my thoughts! Maybe I'm cynical, but I'm tempted to worry this will shortly succumb to a "bug" à la IndexedDB, fixed positioning, vh units, &c. – Jeff McMahan Jul 19 '21 at 17:24
  • Does not work in 14.3 and 15.0 for certain elements. https://jsbin.com/sizavudima/edit?html,output – David Vielhuber Dec 30 '21 at 21:29
6

This works in Safari iOS 15

document.ondblclick = function(e) {
    e.preventDefault();
}
Ryan Dantzler
  • 1,124
  • 1
  • 8
  • 18
1

I came across this page earlier while trying to stop any touchscreen browser from zooming on either double tap or two finger zoom. It's essential for my website which presents on a tablet allowing the public to click and register satisfaction of events they have attended, so I don't want anybody to fiddle with the layout.

I unsuccessfully tried Helmet, and finally the way I got it to disable all unwanted move/zoom events was to use CSS similar to above:

body {
  touch-action: none;
}

Stating 'none' disabled double click zoom, whereas 'manipulation' still opened the door for double click zoom (although it did disable two finger zoom).

Oddlad
  • 11
  • 3
0

When you want to disable "double tap to zoom" only on part of your screen (in my case, there was an image gallery that allows going to the next or previous image by tapping on the right or left side of the gallery and double tapping was interrupting the user experience), you can set pointer-events: none on the image elements or their parents, and attach event listeners to the root element of the image gallery.

So, given the following HTML:

<header>…</header>
<ul class="slideshow">
 <li><img src="…" /></li>
 …
</ul>
<footer></footer>

You’d do the following in CSS:

.slideshow > * {
  pointer-events: none;
}

And attach event listener to .slideshow that doesn’t have its pointer events disabled:

document.querySelector('.slideshow').addEventListener('click', (event) {
  // detect what part of the screen was clicked and go to the next 
  // or previous slide
})
Misha Reyzlin
  • 13,736
  • 4
  • 54
  • 63