How to disable browser zoom functionality on web page

[Finn_Mystery]

I’m building a canvas-based drawing application and need to block users from using browser zoom features. The zoom interferes with my custom pan and zoom controls.

What I’ve already attempted:

Using viewport meta tag:

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

Trying to catch wheel events:

document.addEventListener('wheel', preventZoom);

function preventZoom(event) {
  if (event.ctrlKey) {
    event.preventDefault();
  }
}

Neither approach works properly. Users can still zoom using Ctrl+scroll wheel or pinch gestures on mobile. How can I completely disable all zoom behaviors while keeping my app’s functionality intact?

[lucasg]

You can’t really block browser zoom because of accessibility standards browsers have to follow. I ran into this same problem building a map visualization tool - zoom conflicts were destroying the user experience. Your current setup misses touch events, which handle mobile pinch zoom. You’d need to catch touchstart and touchmove events with multiple touch points. But honestly, the real fix I found was working with zoom instead of fighting it. I stopped trying to block zoom completely and started detecting it instead - I monitor changes in window.outerWidth/window.innerWidth ratios and document.documentElement.clientWidth. When I detect browser zoom, I just adjust my canvas scaling calculations to compensate. This works way better than trying to prevent zoom entirely. Some browsers will always let users zoom through accessibility features or menu options, no matter what your JavaScript does. Better to build your drawing app to handle zoom gracefully than assume you can disable it completely.

[Sky24]

Hit this exact problem 8 months ago building a web image editor. Modern browsers block zoom prevention for accessibility - you can’t really stop it anymore. Your wheel event idea’s on track but you’re missing stuff. You need passive AND non-passive listeners, plus handle Ctrl+= and Ctrl± separately from wheel events. Mobile’s worse - pinch gestures sneak through no matter what you do. I ended up ditching zoom blocking completely. Built a detection system instead that watches window.visualViewport changes and tracks document.documentElement.getBoundingClientRect(). When browser zoom kicks in, I recalculate the canvas coordinates and fix the transformation matrix. Your custom pan/zoom stays accurate whatever the browser throws at you. More work upfront but way more reliable across browsers and devices.

[Mia92]

you’re fighting a losing battle here - browsers don’t want sites disabling zoom for accessibility reasons. i tried this on a webgl project last year and even blocking all the events, zoom still leaked through. what actually worked was detecting when zoom changed and adapting my canvas coordinates instead of trying to prevent it.

[mikezhang]

Had this exact problem with a CAD viewer I built last year. The viewport meta tag works for mobile Safari, but desktop browsers ignore those zoom restrictions for accessibility reasons. Your wheel event handler’s on the right track - just needs to be more aggressive. What finally worked for me was combining multiple approaches. First, add passive:false to your wheel listener and catch touchstart/touchmove events for mobile pinch gestures. Second, override the default keyboard shortcuts by catching keydown events for Ctrl+Plus, Ctrl+Minus, and Ctrl+0. Here’s the tricky part - you can’t block everything. Some browsers will always allow zoom through their menu. What helped was showing a clear message when zoom’s detected, asking users to reset their zoom level. You can detect zoom changes by monitoring window.devicePixelRatio or checking if your canvas dimensions don’t match expected values. Not perfect, but it cut down user confusion big time in my app.