Search code examples
javascripthtmlcsswebkitelectron

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?


Solution

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