Disable Browser Zoom on Mobile with JavaScript
Ever used a website on your phone only to find the screen pinches or double taps zoom in or out? This can be a real pain specially if you don’t want page to change at all. Fortunately, preventing this zooming from occurring on your mobile website can be, to a degree, achieved through JavaScript. In this post I’ll show you how to do this with some simple steps.
First, Let’s break it down and I will guide you through the process so you can get your website to behave the way you want!
Why is this Important?
Before going into the code, we should know: why one would want to disable zooming. Sometimes the size of a website must remain a certain size in order for visitors to properly see it. In this example, we don’t want a site to zoom in or out when a user touches the screen based on the screen size to which the site is designed. It can be especially helpful if you’re building mobile friendly websites.
How to Stop Zooming on Mobile Devices
What controls how the viewport behaves, prevents it from zooming in on mobile websites is the trick. The viewport is the part of your screen that does the showing of the webpage. Using the special tag call Meta tag, you tell the website not to zoom.
Here’s how it works:
Step 1: Setting the Viewport
To make sure that your website looks the way you’d like on a mobile phone, you have to be sure that your website is telling the browser exactly how it should and it should look like when viewed on a mobile device. We do this with the meta tag. Here’s what it looks like:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Usually you place this tag within the <head> area of the web site. The width of the page will iit to be the same as the device width and start the zoom at 100%.
However, if you just want to disable zoom completely, you require to change this meta tag slightly. Here’s how you do it:
Step 2: Disabling the Zoom
To stop zooming on mobile devices you will then have to alter the content of the meta tag. Here’s how you can update it:
// Prevent zooming with more than one finger
document.addEventListener('touchstart', function(e) {
if (e.touches.length > 1) {
e.preventDefault(); // Prevent zoom
}
}, { passive: false });
// Prevent pinch zooming with gestures
document.addEventListener('gesturestart', function(e) {
e.preventDefault(); // Prevent zoom gesture
}, { passive: false });The trick here is with user-scalable=no. It does not allow zooming into or out with the page. If someone who visits your website on their phone today, they’re not going to be able to pinch to zoom or double tap to zoom in.
Step 3: Using JavaScript to Control Zoom
Sometimes you may need to block zooming completely using JavaScript. Yes it probably sounds complicated but really it isn’t actually.
Here’s a quick and easy JavaScript solution:
I will explain what’s going on with it.
- touchstart event: This listens for the moment the user touches the screen. The script prevents that action from happening if they touch with more than one finger (which means they’re trying to zoom).
- gesturestart event: This listens for when the user attempts to perform gesture such as pinching to zoom. That is where it stops that from happening too.
If this simple JavaScript is used, you can stop both pinch gestures and double taps from zooming.
Testing Your Website
Once you’ve added the meta tag and Javascript code, you’ll want to check out how it works. Here’s how you can do that:
- Open your site on a mobile device of in a mobile emulator (for example Chrome’s developer tools).
- Pinch in or out, double tap the screen, or try to zoom in or out.
- If all goes well and the page should not change in size.
What to Keep in Mind
Turning off zooming can make sense but it’s worth thinking about your audience. There will be some people who will potentially need to zoom in to read text or better see images. It shouldn’t make it harder for your users to enjoy your website if they stop zooming altogether. To start with why it’s always a good practice to test your website on many different devices to see how your website looks like for all types of people.
A Note About Accessibility
One thing to think about is accessibility. Some users might need zooming to help them read smaller text. If you turn off zoom completely, these users might have trouble using your website. Before you make this decision, think carefully about whether your website is readable and easy to use without zooming.
If you do decide to turn off zoom, it’s also probably a good idea to give them other ways to resize text or images, like a text resizing option or a contrast toggle. That means you can improve the user experience on your website without compromising in controlling how your website looks on mobile devices.
Conclusion
You can now stop browser zoom on mobile devices using javascript! With some tweaking of the meta tag and a little bit of JavaScript you can make sure your website remains the same size and looks the way you want it to on mobile specific screens.
So remember this is a great tool when you want to make sure that your page doesn’t look weird and it doesn’t zoom in or out by mistake. However, if you’re not thinking about giving users the power to decide how they’d like to view your website in particular, you should at least consider doing so for accessibility.
Thanks for reading! I’d love to hear your thoughts on this post. Did it help you learn how to avoid zoom on mobile websites? You are welcome to write your feedback or ask question in the comment.
Also, make sure to see other articles on the same topic. They might even give you some more tips and tricks to better your website!
I’ll be back with more simple, practical advice to help make your web development better.
