Html Question posted in
Some basic documentation can be found here.

Html – 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:

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

Here is an example that does not zoom on double tap (even small text): https://www.amazon.de/dp/B0D5MF64XM

Here is an example that does zoom on double tap: https://dr-adler.com

(Sorry for the URLs; embedding interactive code examples here does not reliably demonstrate the problem…)

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search