0
219
ViewsHow to prevent users from magnifying my website?
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).
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.
2 answers
Answer question0
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.
0
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.