How to disable zoom on double tap

The zoom-in feature on a mobile double tap can be disabled with a single line of CSS.

a bored fish

I recently coded a couple of in-browser games but annoyingly when played on a mobile device the browser would zoom in if button was quickly tapped twice. To disable this zoom on a double tap I thought I would have to use some Javascript but was surprised the answer lay in a single line of CSS.

* {
  touch-action: manipulation;
}

MDN Docs states touch-action: manipulation; “Enables panning and pinch zoom gestures, but disables additional non-standard gestures such as double-tap to zoom.” In addition touch-action: none; disables browser handling of all panning and zooming gestures. See more at MDN Docs touch-action page.

That’s it. I hope you found this useful.

Thank you for stumbling across this website and for reading my blog post entitled How to disable zoom on double tap.

Homepage of website