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?

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?

• javascript
• html
• google-chrome
• windows-8.1
• hammer.js

• Try document.addEventListener('touchmove', function(event){ event.stopPropagation(); event.preventDefault(); }); – Ron Gilchrist Commented Mar 20, 2014 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 Commented Mar 28, 2014 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 Commented Apr 1, 2014 at 20:27
• 2 I actually thought of this and tested it. It works without breaking scrolling. – Piper Commented Apr 3, 2014 at 11:00
• @RonGilchrist this should be the anwser, btw is that for chrome>45? – Nikos Commented Aug 13, 2015 at 12:44

2 Answers 2

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 ments 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

Unfortunately it is not possible to pletely 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.