javascript - Google Chrome Pinch-to-zoom prevention - Stack Overflow

admin管理员组

文章数量:1344693

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

Share Improve this question Follow asked Mar 6, 2014 at 18:18 PiperPiper 12511 silver badge66 bronze badges 5

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 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.

本文标签： javascriptGoogle Chrome Pinchtozoom preventionStack Overflow