How to disable double-tap zoom on Safari mobile?

Question

How can double-tap zoom be disabled on Safari mobile?

There are some rules for default behaviour: With text it somehow depends on font-size. Other types of elements also allow to be double tapped and usually perform a zoom then (e. g. img).

But the entire double-tap zoom should be disabled.

These were common approaches:

Applying touch-action: manipulation to *; does not work at all.
Applying touch-action: none to *; seems to disable zooming back out from the zoomed-in position…
<meta name="viewport" ...>; the browser ignores it.
Then, there were some JavaScript/jQuery solutions but none seemed to work at all or work reliably.

Adler · Accepted Answer · 2024-12-01 23:43:10Z

3

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

That's literally it. No special tricks needed lol. Tested on Safari iOS.

answered Dec 1, 2024 at 23:43

Adler

2,8872 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Navid Mirzaaghazadeh · Accepted Answer · 2024-11-14 22:13:57Z

0

Try this: add user-scalable=no in your viewport meta tag, then use JavaScript to prevent double-tap zoom by tracking touchend events like this:

let lastTouchEnd = 0;
document.addEventListener('touchend', (event) => {
    const now = new Date().getTime();
    if (now - lastTouchEnd <= 300) event.preventDefault();
    lastTouchEnd = now;
}, false);

This combo blocks double-tap zoom on Safari without affecting pinch-to-zoom.

answered Nov 14, 2024 at 22:13

Navid Mirzaaghazadeh

133 bronze badges

Comments

Uvindu Anuradha · Accepted Answer · 2024-11-05 04:41:13Z

-1

Safari Mobile lacks a straightforward way to universally disable double-tap zoom. Typical approaches like touch-action: manipulation or user-scalable=no in the viewport meta tag often don’t work reliably on Safari Mobile. Here’s a JavaScript workaround to prevent double-tap zoom:

let lastTouchTime = 0;

document.addEventListener('touchend', (event) => {
    const currentTime = new Date().getTime();
    const tapLength = currentTime - lastTouchTime;

    if (tapLength < 500 && tapLength > 0) {
        event.preventDefault(); // Prevents double-tap zoom
    }

    lastTouchTime = currentTime;
});

This script stops double-tap zoom by treating consecutive taps within 500ms as invalid. Adjust the timing if necessary. This solution doesn't disable pinch-to-zoom, preserving accessibility.

answered Nov 5, 2024 at 4:41

Uvindu Anuradha

3331 silver badge6 bronze badges

3 Comments

Kosh Over a year ago

Nice one! BTW, you might want to know that Date.now() is more verbose equivalent of new Date().getTime()

Adler Over a year ago

Thank you! Can you see that Stack & bing ,… use this hack?

user5127 Over a year ago

@Adler It looks like this answer solved your problem. You may want to accept it and/or give poster the bounty.

Collectives™ on Stack Overflow

How to disable double-tap zoom on Safari mobile?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related