Prevent zoom cross-browser

Question

For a map-like tool, I would like to disable the browser zooming feature. (I know that this is generally a bad idea, but for some specific website, it is needed).

I did it successfully by listening the keyboard shortcut CTRL + / CTRL - and adding e.preventDefault(), etc. But this doesn't prevent from changing the zoom from the browser's Zoom menu.

I tried:

• with CSS: zoom: reset; It works for Chrome (see this page for a working example) but it doesn't work at all on Firefox.

• in various questions/answers, I also found

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

  but this seems to work for mobile only.

---

How to prevent zooming cross-browser ?

Answer 1

I haven't really found an "authoritative" answer, meaning a clear statement from browser developers. However, all answers to similar questions I've found (like this one or that one) suggest the same thing - the browser's zoom feature exists for the benefit of the users and some browsers (like Firefox) simply don't allow you, as a website creator, to take this option away from them.

---

This documentation might shed some light into why allowing authors to disable zoom might be a good idea on mobile devices, but not on desktops.

In short, you might need to prevent mobile devices from initially auto-zooming your website, if you know their calculated auto-zoom will be inappropriate. On desktops, there is no auto-zoom, so when users come to your website, they see it exactly as it was meant to be seen. If they then decide they need to zoom the page, there's no good reason to let you prevent them from doing so.

---

As for the solutions you've listed:

• zoom is a non-standard property not supported by Firefox, and
• <meta name="viewport"> is concerned only with devices on which layout viewport and visual viewport are not the same thing, i.e. mobile devices.

Answer 2

You can disable zoom in browser when using Ctrl + + or Ctrl + - or Ctrl + mouse wheel up or Ctrl + mouse wheel down with this code.

$(document).keydown(function(event) { if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109'  || event.which == '187'  || event.which == '189'  ) ) {         event.preventDefault();      }     // 107 Num Key  +     // 109 Num Key  -     // 173 Min Key  hyphen/underscore key     // 61 Plus key  +/= key });  $(window).bind('mousewheel DOMMouseScroll', function (event) {        if (event.ctrlKey == true) {        event.preventDefault();        } }); 

Check a demo here: JSFiddle.