Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable chrome pinch zoom with javascript

Is there a way to disable chrome pinch zoom with javascript. I don't want to change anything in chrome://flags I want to disable chrome's default zooming and sliding to previous page behaviors and instead I want to write my own panning/zooming code. I'm able to handle all that events but calling 'preventDefault' doesn't help. Handling of mousewheel, ctrl+ and ctrl- events and calling 'preventDefault' there also does not help.

Finally I want to have custom multitouch zooming with 2 fingers and panning capabilities for chrome and IE 11. IE panning works perfectly for me, but zooming doesn't.

Sample script below:

  <!DOCTYPE html>
    <html>
    <head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

    <script type="text/javascript" src="Scripts/jquery-3.1.0.js" ></script>

    <script type="text/javascript" >
      document.addEventListener('touchstart', function(event){
          event.preventDefault();
      });
      document.addEventListener('touchend', function(event){
          event.preventDefault();
      });
      document.addEventListener('touchmove', function(event){
          event.preventDefault();
      });
      $('*').bind('touchmove', false);
    </script>

   <body>
   <h1 align="center">
    TEST STRING FOR PINCH ZOOM
    </h1>
    </body>
    </html>
like image 949
kmkrtich Avatar asked Feb 15 '17 09:02

kmkrtich


People also ask

How do I turn off Zoom on Chrome?

Navigate to the URL chrome://flags/#enable-pinch in your browser and disable the feature. The pinch zoom feature is currently experimental but turned on by default which probably means it will be force-enabled in future versions.

How do I turn off pinch zoom?

Touch or click the picture of the touchpad. Touch or click the Gestures tab. Touch or click the box next to Pinch Zoom to Enable or Disable the Pinch Zoom function.

How do I turn off pinch zoom on Chromebook?

Make a page bigger or smaller Reset zoom: Press Ctrl + 0.


1 Answers

This works for me in case anyone shows up here looking for an answer.

document.addEventListener(
  'wheel',
  function touchHandler(e) {
    if (e.ctrlKey) {
      e.preventDefault();
    }
  },
  { passive: false }
);
like image 126
Ben Swinburne Avatar answered Sep 30 '22 05:09

Ben Swinburne