Javascript - How to stop pinch zoom, multi touch input attacks?

问题

Current Google chrome stable version stopped manually blocking pinch zoom, which was possible in older versions with following settings:

chrome://flags/#enable-pinch

I am getting attacks in my kiosk from some random pinch zoom/multi touch inputs.

How to tell JavaScript to disable pinch zoom/multi touch? (to protect the kiosk)

I tried following but nothing is stopping the kiosk from ignore pinch zoom attacks.

$(document).ready(function() {

  $(document).bind('contextmenu', function()  {
    console.log('NO NO NO. STOP!!!');
    window.location.reload();
    return false;
  });

  $(document).mousedown( function() {
    console.log('NO NO NO. STOP!!!');
    return false; 
  });

});

EDIT:

chrome://flags/#enable-pinch - never works anymore in Google chrome. Google should not have removed it and community should have protested to not have it removed.

回答1:

You should be able to prevent users from zooming in by adding this meta tag to your <head>:

<meta name="viewport" content="width=device-width, user-scalable=no">

My version of Google Chrome Version 51.0.2704.84 (64-bit), respects this setting when I test it using its touch emulation in the developer tools.

For example:

A website that is zoomable by pinching: Hacker News

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A website that is not zoomable by pinching: Designer News

<meta name="viewport" content="width=device-width, user-scalable=no">

I would like to comment that allowing your users to zoom in and out shouldn't be considered an “attack”. Zooming in is very important for people with bad eye sight (or the visually impaired, I'm not sure what the correct and polite English term would be).

If you disable the natural zoom behavior, you should take full responsibility for the readability of your web page.

回答2:

I don't know if this counts as a full answer but I don't have the rep to comment. One option is to set a handler for touch events window.addEventListener("touchstart", touchHandler, false); and then write a touchHandler function

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()
    }
}

Here is some more info about developing with touch events https://mobiforge.com/design-development/html5-mobile-web-touch-events You will have to set the handler for a different touch event to prevent the default pinch zoom behavior depending on the browser. A list can be found here: http://www.quirksmode.org/mobile/default.html

I don't know if this will work for you but it might be worth a try.

回答3:

Assuming you are running the kiosk on a PC, there is no way to do this programmatically from a web application.

You have to disable the multi-touch gesture support either in your touch device driver settings or in the operating system setting. Here is a good example - Windows 7 touch screen - disabling multi-touch gesture not working

回答4:

This is how you prevent zooming in Chrome:

document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});

Maybe except of some element

document.getElementById('someelement').addEventListener('touchstart', function(e){e.stopPropagation()}, false);

回答5:

hi here is my suggestion .Try making it sense if there is multiple inputs and the make it average them out for exaple finger one is at (10,20) and finger two is at (20,10) it is averaged to (15,15).Sorry i could only suggest ideas and not code thank you

回答6:

Fanky's answer works for me (Opera in kiosk mode), except that I use touchmove instead of touchstart. And to keep sliders working, add a specific listener on it as indicate by Fanky.

来源：https://stackoverflow.com/questions/37379694/javascript-how-to-stop-pinch-zoom-multi-touch-input-attacks

标签

javascript

jquery

windows

google-chrome

chromium