prevent iOS from zooming on doubletap

(without preventing other doubletap events)

Currently I’m working on an offline WebApp for iPads. I needed to disable the default zoom function occuring when the user doubletaps the screen (especially on images), because I need it for another user interaction instead.

Sadly there’s no standard handler for the doubletap and no event for the zoom itself, so there’s no possibility to target the zoom action directly. The viewport property “user-scalable=no” doesn’t prevent the zoom by doubletap either (why?).

Luckily there’s a pretty neat and simple workaround with Javascript or jQuery available!

Javascript solution:

jQuery solution:

That’s it! Put this in your script and you’re good to go. The only parameter you might want to tweak is the 500 in the if-statement which defines the max.delay allowed between the two taps. If it’s exceeded, the taps are going to be treated as two single taps instead of a doubletap.

The beauty lies within the fact, that doubletaps further down the DOM are not affected and that there is no timeout needed. The function compares the current timestamp with the saved timestamp before updating the variable.

It’s as simple as it gets.