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.

Ku

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.

Nitz

Any idea when these "future versions of Chrome" are going to appear? Over a year later, and this still isn't fixed. My site works fine in Firefox for Android (with the viewport set). – Hafnium

I've just tried this on Chrome stable for Android on a Nexus 5 and double tap does nothing. What device and website are you seeing this with? – Nitz

Galaxy S4, Chrome 38.0.2125.114 - you can try it on the home page at beta.xruxible.com ; no login required – Hafnium

Few things. On that site there is no initial-scale to 1.0, which means the browser can zoom out and does when you first visit, this is because the body is 800px wide which is larger than the screen size. Even with initial scale, I'd expect the double tap to occur because this site isn't actually responsive. – Nitz

Interesting. Well, I've put the initial-scale there now, as you can see. I certainly don't want to stop the user from zooming, that would be terrible UX. I just want the browser to stop thinking that the user wants to zoom, when they push two buttons in quick succession. Also, I'm not sure about your screen size, but the device I mentioned has a 1080 x 1920 screen, more than the 800px app width. The site isn't meant to be seriously optimized for mobile, yet on the same device, mobile Firefox has delivered an excellent experience once the viewport was set. – Hafnium

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

Shillelagh

Answer 3

I wanted to prevent double tap zoom, but allow pinch zoom. I solved that by looking at event.touches.length, and only prevents the event if the length is 1 and too little time has passed.

function preventDoubleTap(elem) {
  let lastTimeStamp = 0;
  elem.addEventListener('touchstart', (event) => {
    if (event.touches.length === 1) {
      if (event.timeStamp - lastTimeStamp < 300) event.preventDefault();
      lastTimeStamp = event.timeStamp;
    }
  });
}

Nikolenikoletta