DEV Community

Cover image for Disable Zoom on pinch in mobile using HTML tag
Kritika Pattalam Bharathkumar
Kritika Pattalam Bharathkumar

Posted on • Originally published at blog.kritikapattalam.com

Disable Zoom on pinch in mobile using HTML tag

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>

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)