Is it possible to disable zoom in/out functionality in a Electron electron-quick-start JS app?

Question

This question is specific to electron-quick-start, so it's not a duplicate.

I'm in the very first steps of JS desktop apps with https://github.com/electron/electron-quick-start, I have the code and I can run the app on my mac(hine).

I've note It's possible to zoon in/out the text on the app, which is a feature common to web. Not so common to desktop apps.

How do I disable that behavior?

Possible duplicate of [Disable pinch zoom in webkit (or electron)](http://stackoverflow.com/questions/29929411/disable-pinch-zoom-in-webkit-or-electron) — therobinkim, Dec 26 '16 at 23:06
Here is the answer: http://stackoverflow.com/questions/29929411/disable-pinch-zoom-in-webkit-or-electron — Mustafa Cihat Candan, Dec 26 '16 at 23:23
From there I understand how to prevent mouse-made zoom. I still can do Ctrl++/Ctrl+-. Perhaps you can point me to the specific part? — KcFnMi, Dec 26 '16 at 23:33

score 9 · Answer 1 · answered Jun 13 '18 at 08:40

If you want to do the same, but in the Main Process (in your case in main.js), you can do this :

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

therobinkim · Accepted Answer · 2016-12-28T23:20:03.350

5

Add the following to the JavaScript file that your rendered html file is sourcing in (see, main process vs renderer process).

var webFrame = require('electron').webFrame;
webFrame.setVisualZoomLevelLimits(1, 1);
webFrame.setLayoutZoomLevelLimits(0, 0);

In your case, it's renderer.js for the electron-quick-start app.

Documentation: https://github.com/electron/electron/blob/master/docs/api/web-frame.md#webframesetzoomlevellimitsminimumlevel-maximumlevel

edited Dec 28 '16 at 23:20

answered Dec 26 '16 at 23:44

therobinkim

2,295
12
20

This should prevent `Ctrl++`/`Ctrl+-` also? – KcFnMi Dec 27 '16 at 02:59
@KcFnMi I'ed recommend you try it out and see if it works. The documentation I linked above offers other methods related to setting the zoom level. – therobinkim Dec 27 '16 at 04:05
@KcFnMi I added an edit that I believe is a minor improvement on your answer. – therobinkim Dec 28 '16 at 23:21

score 2 · Answer 3 · answered Jul 18 '18 at 14:00

The setVisualZoomLevelLimits command is deprecated.

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

score 0 · Answer 4 · answered Dec 27 '16 at 18:50

It appears that adding the following to renderer.js does the job:

var webFrame = require('electron').webFrame;
    webFrame.setVisualZoomLevelLimits(1,1);
require('electron').webFrame.setLayoutZoomLevelLimits(0, 0);

Both, zoom via mouse and via Ctrl++/Ctrl+- are disabled.

If some one has comments or a better answer I'll appreciate.

Is it possible to disable zoom in/out functionality in a Electron electron-quick-start JS app?

4 Answers4