-1

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 Figma, and it has a fancy feature: users can't magnify its webpage using pinch movements on my Touchpad, which is really useful since the toolbars will always be there. Notice that I'm using a Mac computer instead of touch-screen devices.

Edit: I've already provided the feature to let users magnify the central page. (S:__% means scale here.) But when users try to magnify the page, I only want the central page to be magnified, and let those toolbars stay. Currently, when users magnify the page, the toolbars will also be magnified.

I've spent about 4 hours searching for how to implement this feature, but I still failed. Could anyone help me about this? I appreciate your time and effort! Thank you so much!

Things I've tried so far:

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

CSS:
html, body, #root, .app {
  height: 100%;
  width: 100%;
  touch-action: pan-x pan-y;
}

window.addEventListener("resize", () => {console.log("...")});

document.body.addEventListener("transitionstart", ()=>{...});

/* 
   Listening to touchstart, touchend, touchmove events 
   (I'm not using touch screen devices so this doesn't work).
   Monitoring dpi changes 
   (dpi doesn't change during magnification), 
*/

Here's my app (it's still a prototype). My app

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

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

SparkRTG
  • 51
  • 6
  • 2
    This is not really an answer, but a word of caution that people using your site may have very good reasons to "magnify" it, such as to improve accessibility. Figma does have this feature as well, it can have its panes zoomed in if you manually do so (through browser settings), but it binds `CTRL +`, `CTRL -` and `CTRL + MSCROLL` to zoom the central pane by default. Maybe going this way would be better, instead of completely preventing zooming. – sandmann Nov 12 '21 at 18:20
  • 2
    Just for your information. It's not a good practice to stop magnification. Users do that when it's hard for them to read the text. I'm a UI designer and developer and I get crazy when I cannot magnify a website. – Azu Nov 12 '21 at 18:20
  • As a developer or designer you never want to assume only one of your elements such as the tool bar you mentioned, will be good enough. Accessibility to all users of a site or app is very important so utilizing features such as magnification should stay unless there is a very important reason not to keep it. – Brent Nov 12 '21 at 18:23
  • When you disable basic functions of browsers (like people used to do with JS in the early days to prevent right-clicking) it makes users __very angry__. And, like the other commenters have said, it limits the ability of users (who maybe sight impaired for example) who _have_ to take advantage of zoom to read the content. This is a very bad idea. – Andy Nov 12 '21 at 18:24
  • Yeah, I know that I shouldn't prevent users from magnifying my page. But I need to make the toolbars be static there and only let the central page be magnified. – SparkRTG Nov 12 '21 at 18:32
  • Could you describe a bit more why you need to make the toolbars non-magnifiable? There may be some other way round it - but please don't stop users magnifying your site as others have emphasised. – A Haworth Nov 12 '21 at 18:35

2 Answers2

0

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.

sandmann
  • 363
  • 2
  • 13
-1

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.

DROPKICK
  • 189
  • 5