11

I'm developing an app for Chrome on a Microsoft Surface Pro 2 running Windows 8.1. Recently, the Chromium team decided they wanted to add the pinch-to-zoom gesture in Chrome for Windows 8, which is all and good. They did not, however, add a flag to disable this behavior in Chrome's settings for those few of us that don't want pinch-to-zoom functionality.

Now I'm left trying to disable the browser's default behavior by other means. The first thing I tried was to add this meta-tag:

<meta name="viewport" content="width=device-width, initial-scale=1.5, maximum-scale=1.5, user-scalable=no" />

It had no effect. I've also been trying to use the hammer.js touch library to disable the behavior with limited success; pinching sufficiently fast enough still zooms the page.

Does anyone know of a effective way to disable the pinch-to-zoom behavior on Chrome for Windows 8.1?

Piper
  • 125
  • 1
  • 6
  • Try document.addEventListener('touchmove', function(event){ event.stopPropagation(); event.preventDefault(); }); – Ron Gilchrist Mar 20 '14 at 21:33
  • Thanks, Ron. Your suggestion works, however, since scrolling apparently also counts as a touchmove-type event it is prevented. In other words, all scrolling on my page breaks :c( – Piper Mar 28 '14 at 12:05
  • 2
    You can look to see if event.touches.length === 2 and then cancel because you know it is a pinch, not a scroll or pan. – Ron Gilchrist Apr 01 '14 at 20:27
  • 2
    I actually thought of this and tested it. It works without breaking scrolling. – Piper Apr 03 '14 at 11:00
  • @RonGilchrist this should be the anwser, btw is that for chrome>45? – Nikos Aug 13 '15 at 12:44

2 Answers2

7

User-based approach:

Enable viewport meta tag support by:

  1. going to chrome://flags
  2. click enable "Enable viewport meta tag"

Programmatic approach

(as suggested in comments above):

  1. Listen to touchmove events
  2. call preventDefault on them if you detect two touches.

Note: Always preventing touchmove would cause simple scroll to stop working

Matyas
  • 13,473
  • 3
  • 60
  • 73
  • I can also add that, in a recent update, a set of new flags were added to Chrome. These included toggle-flags for Pinch-to-Zoom, horizontal overscroll to navigate history and more. A user-based approach may therefore be to disable PtZ specifically (visited pages wouldn't neccesarily need the viewport meta tag to disable PtZ in this case). – Piper May 09 '14 at 11:36
  • This is the officially best answer. Forget about meta viewport because it's *not* a standard. – trusktr Nov 02 '14 at 04:18
  • The "Enable viewport meta tag" setting is not available in chrome://flags in chrome 48 – 1800 INFORMATION Feb 14 '16 at 23:15
1

Unfortunately it is not possible to completely block, it seems.

Matyas' solution will work great until you start using one finger to scroll, and then put another finger down and pinch to zoom.

Calling preventDefault in this case causes the warning: "Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."

And the pinch to zoom is not blocked.

This appears to be a bug.

user169771
  • 1,962
  • 2
  • 13
  • 11
  • If you make your own scrollable (e.g. moving the position of an element to emulate scrolling) then no worries. :D – trusktr Nov 02 '14 at 04:21