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?
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);
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
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
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.
Chrome removed setLayoutZoomLevelLimits(0,0) as it is beyond electron limits now,
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:
window.on('focus', () => {
globalShortcut.register("CommandOrControl", () => { return })
})
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.
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
