CODEWITHSUNDEEP
htmlcssresponsive-designfrontenduser-experience
Adler
Adler

Reputation: 2807

How to disable double-tap zoom on Safari mobile?

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:

Upvotes: 1

Views: 155

Answers (3)

Adler
Adler

Reputation: 2807

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

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

Upvotes: 0

Navid Mirzaaghazadeh
Navid Mirzaaghazadeh

Reputation: 15

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.

Upvotes: 0

Uvindu Anuradha
Uvindu Anuradha

Reputation: 337

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.

Upvotes: 0

Related Questions