I have a kiosk in train station public place and in airport.

Random people needs to use the touch screen application which is running on Google chrome. When the user apply unpinch or pinch action on Google chrome then Google chrome makes abnormal zoomed in screen and leaves the screen zoomed in forever, and then i get call that my application do not work.

Using chrome://flags/#enable-pinch in past Google chrome was able to kill the pinch but now in new version they removed that feature also following options none of them works anymore like it used to work in past with``chrome://flags/#enable-pinch`

chrome://flags/#touch-events - if i disable this it disable whole touch inputs on Google chrome

<meta name="viewport" content="width=device-width, user-scalable=no"> - if i apply this it has no effect on Google chrome, still pinch/unpinch attacks occure

Therefore, i kept trying all other possible way to resolve it

I am pulling all my hair out because all options are failing.

Can anyone please advise how to resolve it? How do i absolutely disable the pinch/unpinch on Google chrome or on whole operating system? I also tried control panel but none of the control panel showing an option where it says disable pinch/unpinch attacks.

// Dear God, please give me a Pinch disable option for, Google chrome. Its a nightmare, nothing stops pinch zoom actions.
window.addEventListener("touchstart", touchHandler, false);
function touchHandler(event){
    if(event.touches.length > 1){
      console.log("pinch "); // detected
      window.location.reload();// detected
      try {
        event.preventDefault(); // FAIL FAIL FAIL FAILLLLLLLL ???????????
        return false;
      }catch(eee) {
      }
    }
    else {
      console.log("pinch not");//detected
    }
}

I have a kiosk in train station public place and in airport.

Random people needs to use the touch screen application which is running on Google chrome. When the user apply unpinch or pinch action on Google chrome then Google chrome makes abnormal zoomed in screen and leaves the screen zoomed in forever, and then i get call that my application do not work.

Using chrome://flags/#enable-pinch in past Google chrome was able to kill the pinch but now in new version they removed that feature also following options none of them works anymore like it used to work in past with``chrome://flags/#enable-pinch`

chrome://flags/#touch-events - if i disable this it disable whole touch inputs on Google chrome

<meta name="viewport" content="width=device-width, user-scalable=no"> - if i apply this it has no effect on Google chrome, still pinch/unpinch attacks occure

Therefore, i kept trying all other possible way to resolve it

I am pulling all my hair out because all options are failing.

Can anyone please advise how to resolve it? How do i absolutely disable the pinch/unpinch on Google chrome or on whole operating system? I also tried control panel but none of the control panel showing an option where it says disable pinch/unpinch attacks.

// Dear God, please give me a Pinch disable option for, Google chrome. Its a nightmare, nothing stops pinch zoom actions.
window.addEventListener("touchstart", touchHandler, false);
function touchHandler(event){
    if(event.touches.length > 1){
      console.log("pinch "); // detected
      window.location.reload();// detected
      try {
        event.preventDefault(); // FAIL FAIL FAIL FAILLLLLLLL ???????????
        return false;
      }catch(eee) {
      }
    }
    else {
      console.log("pinch not");//detected
    }
}

• javascript
• jquery
• css
• google-chrome
• window

• Would <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> work? – Christian Scott Commented Mar 22, 2018 at 22:23
• That also do not work, still pinch, unpinch is active. – user285594 Commented Mar 22, 2018 at 22:26
• 1 You may be able to solve this by basing element sizes on the viewport (CSS example: width: 50vw; height: 50vh;) or rendering to a <cavas> element and keeping its size at 100%. This would result in zooming having no effect. Of course, that may be more trouble than it's worth if you'd have a lot of content to rewrite. I believe you can detect if the browser is zoomed in using JavaScript, so displaying a message instructing the user on how they can zoom out again may also suffice. This sounds important, whatever it is, so I hope you get it resolved and keep your boss happy. – spacer GIF Commented Mar 22, 2018 at 22:34

2 Answers 2

ANSWER: 2018

I've been trying to solve the same issue with a kiosk application. I've tried meta tags and touch events but nothing on the application side would work for me.

In the end the solution I found was disabling pinch from the mand line when booting up Chrome in kiosk mode

Here's an example:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --start-fullscreen  --kiosk 
--disable-pinch  http://127.0.0.1:1000

I am guessing that I am a bit late for you, but for the next people who find this via google, the solution is actually pretty simple, by just using pure CSS.

The property you are looking for is touch-action and as explained by MDN:

The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user via a touchscreen (for instance, by panning or zooming features built into the browser)

A basic solution of disabling all pinch to zoom would be the following code snippet placed in your CSS.

body {
    touch-action: none;
}

There are other options souch as pan-x, pan-left, pan-right, pan-y, pan-up, pan-down, pinch-zoom.

Check the full docs @ https://developer.mozilla/en-US/docs/Web/CSS/touch-action