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.
Best Answer
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 followingdisable-dbl-tap-zoom
class:From the
touch-action
docs (emphasis mine):This value works on Android and on iOS.