How could I prevent users from magnifying the website?

I'm trying to develop a React website app that could create designs for other websites. One existing website that I could find is

Here's my app after magnification (obviously I don't want users to do so).

Here's Figma's page. Magnification doesn't work on its page.

CodePudding user response：

Zooming with keyboard shortcuts

As pointed in this question ("Prevent zoom cross-browser" on StackOverflow) you can listen to keydown events and use event.preventDefault() to stop the user from zooming in and out on your page (if they do so with keyboard shortcuts) but still they can go on browser settings and tweak it manually.

It'd be something like this:

window.addEventListener('keydown', function(e) {
    // Key codes 187 and 189 are for ' ' and '-' keys (this may change from browser to browser)
    if (e.ctrlKey && (e.keyCode === 187 || e.keyCode === 189)) {
        e.preventDefault();
        // ... code to zoom your main pane
    }
});
// code tested on Brave Browser

This is not necessarily bad. As I pointed out in my comment, users may have very good reasons to zoom in and out on your site, such as improve accessibility. What you can do is prevent them from using default shortcuts to do this, as for your specific use case it seems reasonable that instead of zooming all the elements on the page by default, you just zoom your "main pane". I would recommend though that you leave the defaults as they are and use your own shortcuts to zoom in and out (and make sure they don't interfere with any other default shortcut).

More about Keyboard events on MDN Web Docs: KeyboardEvent

Zooming with a touchpad

As for addressing zooming with the touchpad, you can listen to Touch Events (more about them on MDN Web Docs: Touch events) and tweak its behaviour as well. Again, the user can still go to their browser settings and tweak the zoom level there.

A few comments

I'm not aware of any means to stop the user from tweaking zoom levels from browser settings and I'd be glad if it doesn't exist at all, preventing the user from zooming the page at all is a bad UX decision and it's bad for accessibility.

And just a general word of advice as a web developer: do not ever sacrifice accessibility. Any time you think about tweaking some default browser behaviour, think about why it was implemented on the first place and consider the people who may depend on that to access your application.

CodePudding user response：

The value for width might differ for you, but preventing user-scaling is set in a viewport meta tag like so: <meta name="viewport" content="width=device-width, user-scalable=no">

Unless I'm misunderstanding your issue, this should take care of it.