Prevent pinch zoom

[RodolfoPichardo]

Is there any way to prevent/limit pinch zoom on the browser?

Currently, when one does pinch zoom one could make the page as small as one wants, which does not look aesthetically pleasing.

[RodolfoPichardo]

Platform: Ubuntu/GTK Version: 2.2.1

[shivaprsd]

Currently there isn't. Have you tried using HTML/JavaScript?

As to the philosophical question of disabling zoom... A11Y. http://adrianroselli.com/2015/10/dont-disable-zoom.html

[RodolfoPichardo]

I agree with the article; however, webview takes this to an extreme:

• You can zoom-in all you want, heck, I even made the browser unresponsive by zooming-in too far (about ten "pinches" did the trick)
• You can zoom-out all you want too, which could make the whole page as small as a pixel, which is useless; in fact, zooming-out in its entirety is pretty useless to the user in most situations.

[shivaprsd]

I would leave it to the discernment of the user whether to do or not to do such apparently stupid things. I would only bother to intervene considering:

• The user can land in such troubles accidentally (but ten pinches is far from an accident).
• To make the behaviour uniform across platforms (for instance, zoom is not enabled by default on macOS webview).

Let's hear Roman's take on this.

[RodolfoPichardo]

In some applications it is necessary to "idiot-proof" the software.

For instance, if we were to use the browser in a library to allow the public to lookup books, we would not want an user to be able to incapacitate the machine and prevent others from using it.

[r0x0r]

You can prevent pinch zoom using HTML https://stackoverflow.com/questions/11689353/disable-pinch-zoom-on-mobile-web

I don't feel that making this a default setting is a right choice.

[RodolfoPichardo]

The solutions provided in the stackoverflow thread do not work.

I've managed to get my hands on an iOS device (the only other product with WebKit), and can confirm that the fifth answer works on safari but not on pywebview.

Also, it is important to note, that all major browsers, have the pinch-out feature disabled.

[shivaprsd]

If it can be implemented with little fuss (on all platforms), I have no objection against making it a create_window flag (zoomable=[True|False]).

[github-actions[bot]]

Stale issue message

[r0x0r]

This can be done by injecting the JS snippet described here https://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari

I have also added <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"> to the default HTML.

[martinlombana]

What about windows IE/11? I have tried everything but can't make it work in order to disable zoom.

[martinlombana]

Ok, I found it. I was missing the mousewheel, which is the thing I wanted to disable the most.

""" setTimeout(function() { document.getElementById('loader').style.display = 'none' document.getElementById('main').style.display = 'block' }, 5000)

      document.addEventListener('touchmove', function (event) {

if (event.scale !== 1) { event.preventDefault(); } }, false);

var lastTouchEnd = 0; document.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false);

window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); """

[r0x0r]

@martinlombana Good work! Care to create a PR? Public API could be create_window(...zoomable=False)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gmm9200]

I was also experiencing this problem. I run a kios powered by Raspbian 10 Buster with a touchscreen and I use pywebview as GUI for a python application. I could not find any way to disable the pinch zoom through javascript or html. If it was possible to create a parameter such as zoom_enabled=False/True it would be fantastic

[m-bagnarelli]

Hey, I implemented this code to disable pinch zoom using javascript:

document.body.addEventListener('touchstart', function(e) { if ( (e.touches.length > 1) || e.targetTouches.length > 1) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); } }, {passive: false});

Hope it helps.

[r0x0r]

I have implemented @m-bagnarelli's zoomable solution in the 4.0 branch. The syntax is webview.create_window(zoomable=False)

Please test.

[martinlombana]

I have implemented @m-bagnarelli's zoomable solution in the 4.0 branch. The syntax is webview.create_window(zoomable=False)

Please test.

It doesn't work on windows with Control+MouseWheel: Touchstart works for touch screens.

I guess a mix of both his solution and mine, should be implemented.

[martinlombana]

This one is needed for WINDOWS/MAC? Control+MouseWheel:

    window.addEventListener("wheel", function (e) {
        if (e.ctrlKey) {
            e.preventDefault();
        }
    }, {passive: false});

[r0x0r]

@martinlombana Thanks for the fix, I pushed it to the 4.0 branch.