Disable double-tap “zoom” option in browser on touch devices

by

Note (as of 2020-08-04): this solution does not appear to work in iOS Safari v12+. I will update this answer and delete this note once I find a clear solution that covers iOS Safari.

CSS-only solution

Add touch-action: manipulation to any element on which you want to disable double tap zoom, like with the following disable-dbl-tap-zoom class:

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}
<button>plain button</button>

<button class="disable-dbl-tap-zoom">button with disabled double-tap zoom</button>

<p>A <b>plain</b> paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

<p class="disable-dbl-tap-zoom">A paragraph <b>with disabled double-tap zoom</b>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

From the touch-action docs (emphasis mine):

manipulation

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom.

This value works on Android and on iOS.

More Related Contents:

  1. Zoom changes the design layout
  2. Why does HTML think “chucknorris” is a color?
  3. How do you disable browser autocomplete on web form field / input tags?
  4. Determine a user’s timezone
  5. Local Storage vs Cookies
  6. Why do browsers match CSS selectors from right to left?
  7. WebSockets vs. Server-Sent events/EventSource
  8. css ‘pointer-events’ property alternative for IE
  9. What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
  10. Determine a user’s timezone
  11. Make page to tell browser not to cache/preserve input values
  12. Network-Path Reference URI / Scheme relative URLs
  13. How to prevent a browser from storing passwords
  14. Localization of input type number
  15. How to add google chrome omnibox-search support for your site?
  16. issue with CSS media queries(scrollbar)
  17. How to disable CSS in Browser for testing purposes
  18. Force browsers to load CSS before showing the page
  19. HTML 5 Favicon – Support?
  20. Is the HTML shown via ‘View Source’ different from the HTML shown in (Firebug) developer tools?
  21. How can I locate the default style sheet for a browser?
  22. Is there a way to force browsers to refresh/download images?
  23. How do I make Firefox auto-refresh on file change?
  24. Is there a way to tell browsers to honor the jpeg exif orientation?
  25. What client-side web scripting languages are there other than JavaScript and VBScript?
  26. Force page zoom at 100% with JS
  27. Why use data URI scheme?
  28. How do I open a URL from C++?
  29. Is any way that is safe to display videos in a browser
  30. Which browsers support data URIs and since which version?

Leave a Comment