I have a html5 application with several viewports. I intend to use HammerJS for providing pinch/zoom gesture on individual viewports. Currently, whenever I pinch in Safari/OSX, the whole window is zoomed in or out, and I want to prevent that. For iOS this works:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

But it doesn't prevent zooming in OSX. Is there any other meta, css3 or javascript that works in Safari/OSX?

I have a html5 application with several viewports. I intend to use HammerJS for providing pinch/zoom gesture on individual viewports. Currently, whenever I pinch in Safari/OSX, the whole window is zoomed in or out, and I want to prevent that. For iOS this works:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

But it doesn't prevent zooming in OSX. Is there any other meta, css3 or javascript that works in Safari/OSX?

• javascript
• macos
• safari
• gesture
• hammer.js

Share Improve this question Follow asked Apr 6, 2016 at 18:04 JaimeJaime 5,98544 gold badges2525 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Since Safari 10.1+, you can hook into the GestureEvent on macOS/OSX.

window.addEventListener('gesturestart', e => e.preventDefault());
window.addEventListener('gesturechange', e => e.preventDefault());
window.addEventListener('gestureend', e => e.preventDefault());

The above will prevent any gesture from firing (e.g. pinch to zoom). You can also handle those events, hooking into scale and rotation values.