Prevent pinch/zoom in Safari for OSX

Question

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?

Answer 1

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.