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

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?

• javascript
• node.js
• electron

• Possible duplicate of Disable pinch zoom in webkit (or electron) – therobinkim Commented Dec 26, 2016 at 23:06
• This question is specific to electron-quick-start. – KcFnMi Commented Dec 26, 2016 at 23:18
• Here is the answer: stackoverflow.com/questions/29929411/… – Mustafa Candan Commented Dec 26, 2016 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 Commented Dec 26, 2016 at 23:33

7 Answers 7

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

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

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

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

Chrome removed setLayoutZoomLevelLimits(0,0) as it is beyond electron limits now,

• https://www.electronjs.org/docs/latest/breaking-changes#removed-webframesetlayoutzoomlevellimits
• https://chromium.googlesource.com/chromium/src/+/938b37a6d2886bf8335fc7db792f1eb46c65b2ae/third_party/blink/common/page/page_zoom.cc#11

So, Ctrl/Cmd + and Ctrl/Cmd - will trigger zoom actions, there is a cool workaround that I recommend to register shortcut and stop the action by using below code snippets:

• onFocus return nothing

window.on('focus', () => {
  globalShortcut.register("CommandOrControl", () => { return })
})

• onBlur unregister the shortcut

window.on('blur', () => {
  globalShortcut.unregister("CommandOrControl+=")
  globalShortcut.unregister("CommandOrControl+-")
})

In 2023, as @5war00p has mentioned in an answer above, the only solution is to use globalShortcut similar to his proposed method. But his way is a little unpolished, and in fact can cause some problems. I suggest doing this in your main.js after creating your window object:

const { globalShortcut } = require('electron');

window.on('focus', () => {
  globalShortcut.register("CommandOrControl+0", () => { return });
  globalShortcut.register("CommandOrControl+plus", () => { return });
  globalShortcut.register("CommandOrControl+=", () => { return });
  globalShortcut.register("CommandOrControl+-", () => { return });
  globalShortcut.register("CommandOrControl+_", () => { return });
});

window.on('blur', () => {
  globalShortcut.unregister("CommandOrControl+0");
  globalShortcut.unregister("CommandOrControl+plus");
  globalShortcut.unregister("CommandOrControl+=");
  globalShortcut.unregister("CommandOrControl+-");
  globalShortcut.unregister("CommandOrControl+_");
});

This covers all the zoom related shortcuts, and doesn't interfere with other shortcuts that use control or command keys. You can also use ipc calls in the registered callbacks to use your own handlers.

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.

custom menu is the only right way to go https://www.electronjs.org/docs/latest/api/menu#examples

const customMenuTemplate = [
  ...(process.platform === 'darwin'
    ? [
        {
          label: app.name,
          submenu: [
            { role: 'about' },
            { type: 'separator' },
            { role: 'services' },
            { type: 'separator' },
            { role: 'hide' },
            { role: 'hideothers' },
            { role: 'unhide' },
            { type: 'separator' },
            { role: 'quit' },
          ],
        },
      ]
    : []),
  {
    label: 'File',
    submenu: [process.platform === 'darwin' ? { role: 'close' } : { role: 'quit' }],
  },
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      ...(process.platform === 'darwin'
        ? [
            { role: 'pasteAndMatchStyle' },
            { role: 'delete' },
            { role: 'selectAll' },
            { type: 'separator' },
            {
              label: 'Speech',
              submenu: [{ role: 'startSpeaking' }, { role: 'stopSpeaking' }],
            },
          ]
        : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]),
    ],
  },
  {
    label: 'View',
    submenu: [
      { role: 'reload' },
      { role: 'forceReload' },
      { role: 'toggleDevTools' },
      { type: 'separator' },
      { role: 'resetZoom', enabled: false },
      { role: 'zoomIn', enabled: false },
      { role: 'zoomOut', enabled: false },
      { type: 'separator' },
      { role: 'togglefullscreen' },
    ],
  },
  {
    label: 'Window',
    role: 'window',
    submenu: [
      { role: 'minimize' },
      { role: 'zoom' },
      ...(process.platform === 'darwin'
        ? [{ type: 'separator' }, { role: 'front' }, { type: 'separator' }, { role: 'window' }]
        : [{ role: 'close' }]),
    ],
  },
  {
    label: 'Help',
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          const { shell } = require('electron');
          await shell.openExternal('https://electronjs.org');
        },
      },
    ],
  },
];

In the above code, we disable the zoom functionality by setting enabled: false on the resetZoom, zoomIn, and zoomOut roles.

Then add the custom menu to your app.

  const menu = Menu.buildFromTemplate(customMenuTemplate);
  Menu.setApplicationMenu(menu);

Voila