Disable pinch zoom in webkit (or electron)

Question

Is there any way to disable pinch zoom in an electron app?

I can\'t get it to work from inside the web-view with normal javascript methods as described here: https:/

Answer 1

I had to set { passive: false } to make it work. Don't ask me why.

window.addEventListener('wheel', (e) => {
  if(e.ctrlKey) e.preventDefault();
}, { passive: false });

Answer 2

It seems very difficult for desktop browser to prevent pinch zoom.

Here are some ideas though!

1) By using some gestures javascript like hammer.js, detect Pinch event and try to prevent it using e.preventDefault

OR

2) Design everything using "%" in css, or use newer units like "vm" etc, (if possible). This way, even page will be zoomed, but content will stay the same for any zoom level.

All the best!

Answer 3

var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');

Solution found by mixing these two links:

1 - https://github.com/electron/electron/issues/8793#issuecomment-289791853

2 - https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md

Answer 4

UPDATE 2:

Use webFrame.setZoomLevelLimits (v0.31.1+) in render process (Differences Between Main Process and Renderer Process). Because smart zoom on mac still work with document.addEventListener.

Example require('electron').webFrame.setZoomLevelLimits(1, 1)

---

UPDATE:

deltaY property for pinch zoom has float value, but normal scroll event return int value. Now solution has no problem with ctrl key.

Demo 2.

document.addEventListener('mousewheel', function(e) {
  if(e.deltaY % 1 !== 0) {
    e.preventDefault();
  }
});

---

Using Chromium monitorEvents(document) I found that is responsible for this event mousewheel. I don't know, why mousewheel triggered with pinch zoom. Next step, find difference between normal scroll and pinch zoom.

Pinch zoom has an attribute e.ctrlKey = true, and normal scroll event has e.ctrlKey = false. But if you hold down ctrl key and scroll a page, e.ctrlKey equal true.

I couldn't find a better solution. :(

Demo

document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});

Answer 5

Is there a reason why you can't use:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Put that in the header and it keeps devices from zooming.

Answer 6

I got the easiest fix for this, in the index.html or similar file for your project, within the script tag, include electron and configure zoom level as below,

<script>
const electron = require('electron'); // Include electron
electron.webFrame.setZoomLevelLimits(1, 1); // Set min max zoom level as 1
const { ipcRenderer } = electron;
...
</script>

This works perfectly fine across devices. The viewport meta tag approach doesn't work well on desktop, only fixes issue on mobile devices.