Search code examples
javascriptjquerywindowsgoogle-chromechromium

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.

Solution

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

    1. A website that is zoomable by pinching: Hacker News

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

    1. 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.