Disable Zoom on pinch in mobile using HTML tag
Kritika Pattalam Bharathkumar
Posted on September 7, 2021
As a user when you open a site in mobile, we tend to pinch and zoom the page to see things more clearly. Have you ever wondered if that feature can be disabled?.
Yes, it can be disabled. What's more interesting is that it can be done by just a single line of code in HTML.
How to disable zoom on pinch
- On the head section of the HTML, include the following piece of line which is a meta tag that tells the browser the details of what should happen on a device's viewport
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,
maximum-scale=1.0 , user-scalable=no"/>
...
</head>
<body>...</body>
</html>
name="viewport"
this means that this meta tag is used for device viewport
width=device-width
assigns the width of the device as the viewport width
initial-scale and maximum-scale is set to 1 -
which means it occupies the full 100% of the viewport on page load
user-scalable=no,
setting the value to no or 0 is what tells the browser to prevent the page from scaling(zoom) in/out
Things to keep in mind while using this
- This can affect accessibility, people with poor vision will have concerns when visiting the page, since it will prevent them for zooming/out and viewing content closely when required. So use wisely.
- iOS or safari still lets the users zoom for the above mentioned accessibility reason, so this fix might not work in those platform.
Lets connect on Twitter | LinkedIn for more web development related chats.
Posted on September 7, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
