How to Prevent Desktop Browser (Chrome, Safari) from Zooming a Webpage

How do you disable viewport zooming on Mobile Safari?

Edit: may not work after iOS 10, please see touch-action based solution below.

Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.

This works for me on Mobile Safari in iOS 4.2.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

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');
     }
}

});

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.

---

Related Topics