Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 905
Billy Moon Avatar asked Apr 28 '15 20:04

Billy Moon


People also ask

How do I turn off pinch zoom?

Touch or click the Gestures tab. Touch or click the box next to Pinch Zoom to Enable or Disable the Pinch Zoom function. Touch or click Save. Restart your computer.

How do you turn on pinch zoom?

In the Hardware and Sound window, under Devices and Printers, click Mouse. In the Mouse Properties window, click the Multitouch Gestures tab. On the Multitouch Gestures tab, locate the Enable Pinch Zoom check box. Once the box is either checked or unchecked, click OK.

How do I turn off pinch zoom in Windows 7?

Press Start button on the keyboard, type Mouse & Touchpad settings and select the top most search result. From the window click on Additional mouse option. Click on the Device Settings tab and click on Settings button. From the left side panel, click Pinch Zoom option and uncheck the box Enable Pinch Zoom.


2 Answers

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();   } }); 
like image 116
artanik Avatar answered Oct 02 '22 20:10

artanik


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!

like image 34
Sandeep Avatar answered Oct 02 '22 18:10

Sandeep