Prevent Zoom Cross-Browser

How to prevent zoom on chrome, firefox, safari?

Try this

$(window).bind('mousewheel DOMMouseScroll', function(event) {
if(event.ctrlKey == true)
{
    event.preventDefault();
    if(event.originalEvent.detail > 0) {
         console.log('Down');
     }else {
         console.log('Up');
     }
}

});

Disable zoom in browser JS

I believe that it is not possible to achieve this, seeing as most browser zoom functions are most definitely hard coded and forced.

The only (cheaty/somewhat regretful) solution that I've seen being used is the following:

  <script>
      document.firstElementChild.style.zoom = "reset";
  </script>

(Which you could easily put as css too). Disabling zoom is not the best solution. Especially if the project that you are working on possibly consists of a lot of text. Zooming function adds readability and increases accessibility to your website, especially for aid of those with bad sight.

How to prevent native browser default pinch to zoom behavior?

I accidentally found a solution which works on Chrome. You basically have to preventDefault the "wheel" event. ctrlKey will be true if it is a pinch event instead of a scroll.

element.addEventListener('wheel', event => {
   const { ctrlKey } = event
   if (ctrlKey) {
      event.preventDefault();
      return
   }
}, { passive: false })

I'd guess this is how Google Maps does it.

The (most) cross-browser solution is probably a combination of the techniques mentioned: user-scalable=no in the "viewport" meta tag for the browsers that do support it and this one for native Chrome.

How to disable page zoom in chrome

For those who may encounter this annoying problem. you only need to use vh and vw in all of your sizes (fonts, elements, etc...) instead of px and em.... those units do not follow page zoom!

Disable zooming of the page in desktop web browsers using Javascript/Jquery

    var zoomlevel=1;

    $("body").dblclick(function(ev) {
        zoomlevel = zoomlevel == 1 ? 2 : 1;



        $(this).css({
            "-moz-transform":"scale("+zoomlevel+")",
            "-webkit-transform":"scale("+zoomlevel+")",
            "-o-transform":"scale("+zoomlevel+")",
            "-ms-transform":"scale("+zoomlevel+")"
        });


    });