Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent pinch zoom #297

Closed
RodolfoPichardo opened this issue Dec 20, 2018 · 20 comments
Closed

Prevent pinch zoom #297

RodolfoPichardo opened this issue Dec 20, 2018 · 20 comments

Comments

@RodolfoPichardo
Copy link

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
Copy link
Author

Platform: Ubuntu/GTK
Version: 2.2.1

@shivaprsd
Copy link
Collaborator

shivaprsd commented Dec 21, 2018

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
Copy link
Author

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
Copy link
Collaborator

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
Copy link
Author

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
Copy link
Owner

r0x0r commented Dec 24, 2018

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
Copy link
Author

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
Copy link
Collaborator

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
Copy link

Stale issue message

@r0x0r
Copy link
Owner

r0x0r commented Mar 2, 2020

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
Copy link
Contributor

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

@martinlombana
Copy link
Contributor

martinlombana commented May 28, 2020

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
Copy link
Owner

r0x0r commented Jun 16, 2020

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

@github-actions
Copy link

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
Copy link

gmm9200 commented Dec 2, 2020

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
Copy link

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
Copy link
Owner

r0x0r commented Apr 13, 2022

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

Please test.

@martinlombana
Copy link
Contributor

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
Copy link
Contributor

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

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

@r0x0r
Copy link
Owner

r0x0r commented Nov 15, 2022

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

@r0x0r r0x0r closed this as completed Jan 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants