Disable pinch zoom in webkit (or electron)
Solution 1
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.
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. :(
document.addEventListener('mousewheel', function(e) {
if(e.ctrlKey) {
e.preventDefault();
}
});
Solution 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!
Solution 3
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);
});
Solution 4
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.
Solution 5
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 !
Comments
-
Billy Moon almost 2 years
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://stackoverflow.com/a/23510108/665261
It seems the
--disable-pinch
flag is not supported by electron.I have experimented with various methods using:
-
event.preventDefault()
on javascripttouchmove/mousemove
events -
meta viewport
tags in HTML -
-webkit-text-size-adjust
in CSS - flags/config for electron
Is there any method either for webkit in general, or electron in particular?
-
-
Admin about 9 yearsCombining this with a keydown/keyup event to check if ctrlKey is set by the actual key using a global flag could possibly solve the differentiation problem.
-
cawney almost 9 yearsOh. That is my trick when I want to disable zooming on mobile. Never had to worry about disabling zooming when I'm on a desktop.
-
Billy Moon almost 9 yearsIt probably works for mobile, I want a solution that also works for desktop.
-
Billy Moon almost 9 yearsthanks for the suggestions. I tried both solutions. Hammer, awesome as it is, does not seem to help with this. It seems to add recognisers as a level on top of events, I think I need something that helps to access more low level functionality. The second one seemed to have no effect when I put font size as percent rule on body, html, paragraph etc...
-
northernwind almost 6 yearsthnks for that, i was beleve in simple solution
-
Zhang Buzz about 4 yearsThank you! This is the only working way in my desktop app.