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?
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.