Disable double-tap "zoom" option in browser on touch devices

html browser touch zoom
Wouter Konecny picture Wouter Konecny · May 16, 2012 · Viewed 135.1k times · Source

I want to disable the double-tap zoom functionality on specified elements in the browser (on touch devices), without disabling all the zoom functionality.

For example: One element can be tapped multiple times for something to happen. This works fine on desktop browsers (as expected), but on touch device browsers, it will zoom in.

Answer

Ross Allen picture Ross Allen · Nov 10, 2018

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;
}

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.

Related questions

What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

What's the difference if one web page starts with <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> and If page starts with <!DOCTYPE html> <html> <…

Read More
How do you disable browser Autocomplete on web form field / input tag?

How do you disable autocomplete in the major browsers for a specific input (or form field)?

Read More
Embedding Base64 Images

Purely out of curiosity, which browsers does Base64 image embedding work in? What I'm referring to is this. I realize it's not usually a good solution for most things, as it increases the page size quite a bit - I'm …

Read More