Disable pinch zoom in webkit (or electron)

Related searches

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:

  1. event.preventDefault() on javascript touchmove/mousemove events
  2. meta viewport tags in HTML
  3. -webkit-text-size-adjust in CSS
  4. flags/config for electron

Is there any method either for webkit in general, or electron in particular?


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.

Demo 2.

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. :(

Demo

document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});

Disable zoom � Issue #8793 � electron/electron � GitHub, I am still able to zoom electron app with hotkeys or pinch to zoom on / 29929411/disable-pinch-zoom-in-webkit-or-electron#29994607 )� Electron version: 1.6.1 Operating system: macOS I am still able to zoom electron app with hotkeys or pinch to zoom on macOS. All of the following below is broken: // in renderer process import { webFrame } from 'electron'; // fix zoom at


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!

Disable pinch zoom in webkit (or electron), 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:� See Disable pinch zoom in webkit (or electron) this answer edited May 23 at 12:25 Community ♦ 1 1 answered Sep 27 '16 at 16:24 kuni 19 1 Doesn't work. – Andy Feb 10 at 11:47


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

Disable pinch zoom in webkit (or electron), 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:� Does anyone have a working solution to disable all kinds of zooming in electron v0.35.0? (including pinch zoom and smart zoom (on mac))


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 !

javascript Disable pinch zoom in webkit (or electron)?, javascript Disable pinch zoom in webkit (or electron)?. document. addEventListener('mousewheel', function(e) { if(e.deltaY % 1 !== 0) { e. preventDefault(); } });. Disable pinch zoom in webkit (or electron) javascript,html,css,webkit,electron. 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.


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

Disable chrome pinch zoom for use in kiosk, Disable pinch zoom in webkit (or electron) location: linuxexchange.com - date: May 1, 2015. Is there any way to disable pinch zoom in an electron app? I can't� If you are 100% sure you must disable pinch and zoom then only do it on the page in question and not site-wide or your mobile visitors will leave in droves. 3 Likes james149 January 17, 2017, 3:41pm


Next, click the right-most tab, labeled Device Settings, and click the Settings button. Screenshot by Matt Elliott/CNET Next, from the left-hand column, click Pinch Zoom and uncheck the box on the


Pinch gestures get mapped to wheel events with the control key pressed, and calling preventDefault () will prevent the page from zooming. This allows web applications to have custom handling for pinch gestures.


Questions: I’m looking for a way to disable the “pinch to zoom” magnification gesture on the iOS implementation of WKWebView. There is a magnification BOOL property available for OS X but it doesn’t seem to be available on iOS.