CODEWITHSUNDEEP
javascripthtmlgoogle-chromewindows-8.1hammer.js
Piper
Piper

Reputation: 125

Google Chrome Pinch-to-zoom prevention

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?

Upvotes: 11

Views: 8291

Answers (2)

user169771
user169771

Reputation: 2090

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.

Upvotes: 1

Matyas
Matyas

Reputation: 13702

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

Upvotes: 7

Related Questions