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>

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.

Check out my other blog posts

Lets connect on Twitter | LinkedIn for more web development related chats.

Disable Zoom on pinch in mobile using HTML tag.

Comments

HTML

How to add "SKIP TO MAIN CONTENT" to websites

More from this blog

HTML Roadmap

Do you use git? Then this is for you...

Create a DOWNLOAD link in a single line of HTML

First Step to Learning Vue JS - 3

Display random quotes from Chuck Norris API

How to disable zoom on pinch

Things to keep in mind while using this

Check out my other blog posts

Command Palette

Comments

HTML

How to add "SKIP TO MAIN CONTENT" to websites

More from this blog

How to disable zoom on pinch

Things to keep in mind while using this

Check out my other blog posts