Disable Pinch Zoom in Webkit (Or Electron)

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 from GitHub:

"If you are looking for a way how to prevent zoom from main process, you can use:"

const webContents = mainWindow.webContents;
webContents.on('did-finish-load', () => {
  webContents.setZoomFactor(1);
  webContents.setVisualZoomLevelLimits(1, 1);
  webContents.setLayoutZoomLevelLimits(0, 0);
});

mainWindow is variable where you have new BrowserWindow, e.g.:

const mainWindow = new BrowserWindow({
  width: 440,
  height: 750,
  // ...
});

const webContents = mainWindow.webContents;
webContents.on("did-finish-load", () => {
  webContents.setZoomFactor(1);
  webContents.setVisualZoomLevelLimits(1, 1);
  webContents.setLayoutZoomLevelLimits(0, 0);
});

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.

I searched so long and hard for a simple solution to this problem with no avail...but later I discovered a plugin called fullpage.js that was able to prevent pinch zoom while still allowing touch gestures. Through the process of js/css elimination, I discovered a very simple solution:

touch-action: none;

Adding this to my full page element successfully prevented pinch zoom but allowed me to scale fabricjs objects with pinching. Hooray !

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

Solution found by mixing these two links:

1 -

2 -

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 });

meta tag should have worked. Try using the minimum-scale=1.0

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

And if it also not works then add both the minimum and maximum scale

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

P.S. : It will disable zooming on mobile phones only.

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.