disable Double tap zoom/resize on safari IOS12***

Question

I search 99% website on internet... nope answer can solve my problem..i am using ios 12... does any jQuery can totally disable safari double tap now???

or can I have some code detect function when(if user is double tapped?

I spend 2weeks for that i still not find the solution.. This is what i tried... CSS:

* {
  -webkit-text-size-adjust: none;
  zoom: 1;
  touch-action: manipulation;
}
* {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

and disable viewport zooming iOS 10+ safari?

I hate safari..

Maybe this works for you: https://stackoverflow.com/questions/46167604/ios-html-disable-double-tap-to-zoom — Pablo Jareño López, May 07 '19 at 16:19
It seems that this isnt working in iOS 12 anymore. Any idea how to make this work for iOS 12? — ominsi kathsas, May 07 '19 at 16:27

score 16 · Answer 1 · answered May 31 '19 at 10:35

16

Adding an empty click listener on HTML elements will prevent double tap zoom.

It's ugly but does the job.

myElement.addEventListener("click", event => {});

Next thing i'm trying to figure out to disable all zooming is preventing pinch.

Unfortunately, touch events are not dispatched during iOs momentum scrolling. The following code works as long as the page is not scrolling (tested only on 12.2) :

document.addEventListener("touchstart", event => {
    if(event.touches.length > 1) {
        console.log("zoom plz stahp");
        event.preventDefault();
        event.stopPropagation(); // maybe useless
    }
}, {passive: false});

answered May 31 '19 at 10:35

nicopowa

459
3
11

Thank you! This is the only solution that I have seen working – Chris Aug 10 '19 at 04:54
2

Excellent! iOS/Safari 13.1.2 confirmed. – Alex Oct 12 '19 at 21:03
Alex, in ios 13 the double tap zoom is disabled. only pinch to zoom works – oygen Dec 17 '19 at 09:36
Zara website disabled pinch to zoom even when scrolling, in cart page, take a look at their code. – Marco Marsala Apr 02 '20 at 18:31
just tested Zara cart page on iOs 13.3.1 scroll+pinch is not disabled – nicopowa Apr 06 '20 at 13:46
the empty click listener isn't working to prevent double-tap zoom for me on `button` elements, which is where my primary zoom problems seem to always be.. anyone else? – fredless Apr 30 '20 at 16:01
check out the css solution above. works well for me. – Someone Special Aug 07 '20 at 15:38

score 9 · Answer 2 · answered Apr 02 '20 at 18:50

9

Add CSS style touch-action: pan-y to <body> tag. That's all.

answered Apr 02 '20 at 18:50

Marco Marsala

2,332
5
25
39

3

this solution is the least complicated to simply remove pinching zoom for most use case. – Someone Special Aug 07 '20 at 15:35
This disables the pinch gesture not double-tap gesture (IOS 14). – A-Tech Apr 13 '22 at 10:34

Lars Blumberg · Answer 3 · 2020-08-30T23:21:14.287

0

To disable the double tap and pinch gestures I chose the following combination:

Disabling double tap:

document.addEventListener("click", event => {
  event.preventDefault()
  event.stopPropagation()
})

Disabling pinch gesture:

<head>
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

edited Aug 30 '20 at 23:21

answered Aug 05 '20 at 13:19

Lars Blumberg

19,326
11
90
127

disable Double tap zoom/resize on safari IOS12***

3 Answers3

Linked