CODEWITHSUNDEEP
htmlioswebsafari
oygen
oygen

Reputation: 507

Disable double tap zoom on Safari iOS 13 +

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.

Upvotes: 16

Views: 16834

Answers (4)

Ryan Dantzler
Ryan Dantzler

Reputation: 1144

This works in Safari iOS 15

document.ondblclick = function(e) {
    e.preventDefault();
}

Upvotes: 8

Oddlad
Oddlad

Reputation: 11

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).

Upvotes: 1

Misha Reyzlin
Misha Reyzlin

Reputation: 13896

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
})

Upvotes: 0

Kevin
Kevin

Reputation: 1357

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.

Upvotes: 21

Related Questions