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.

score 6 · Accepted Answer · answered Nov 24 '13 at 23:30

6

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.

answered Nov 24 '13 at 23:30

Matt Gaunt

9,434
3
36
57

1

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). – Lambart Jan 17 '15 at 22:41
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? – Matt Gaunt Jan 26 '15 at 12:32
Galaxy S4, Chrome 38.0.2125.114 - you can try it on the home page at http://beta.xruxible.com ; no login required – Lambart Jan 26 '15 at 20:12
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. – Matt Gaunt Jan 27 '15 at 04:44
1

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. – Lambart Jan 28 '15 at 05:56

score 2 · Answer 2 · edited Oct 19 '19 at 04:34

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

score 0 · Answer 3 · answered Jun 27 '23 at 23:02

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

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

3 Answers3

Linked