How to disable double tap zoom feature in Chrome 30 on Android (Nexus 10)

Question

Is it possible to disable the context zoom triggered by double-tapping an element on Chrome? (Setup: Nexus 10 | Android 4.3 | Chrome 30).

Double-tapping isn't one of the native touch events (touchstart, touchend, etc). It seems that the only solutions out there are libraries that define a doubletap event themselves (jquery-doubletap and hammer.js), but I'm running into issues using these (https://github.com/EightMedia/hammer.js/issues/388).

Can anyone explain how the doubletap event is triggered? it doesn't seem to be an element event, but rather one that is handled by the browser itself (with each browser dictating their own unique behavior).

Lastly, is there a way to disable double-tap zoom? It's a UX killer for me. Thanks.

Answer 1

In future versions of Chrome for Android, the double tap will be removed when you have a viewport set. If you want to disable it for stable today, you will need to set user-scalable=no in your viewport.

This will disable zooming (which may be bad for accessibility) but should allow you to get all touch events.

Answer 2

This code will basically just prevent the double tap feature from happening. The event is still triggered for every touchstart event, so just put any other functionality outside of that if statement and you'll be free of the annoying double tap zoom feature.

var time_stamp = 0; // Or Date.now()
window.addEventListener("touchstart", function(event_) {
    if (event_.timeStamp - time_stamp < 300) { // A tap that occurs less than 300 ms from the last tap will trigger a double tap. This delay may be different between browsers.
        event_.preventDefault();
        return false;
    }
    time_stamp = event_.timeStamp;
});