How to Disable the Pinch-to-Zoom Functionality on your Responsive Website

If you’re just starting out coding responsive websites then you may be annoyed that users can still pinch and zoom the beautiful site you created to look a certain way on each device. While Pinch-to-Zoom definitely has its purpose, for responsive sites there is no need because content is already being served up at the appropriate aspect. If you want to quickly and easily disable the Pinch-to-Zoom functionality, check out this simple solution using just a single meta tag.

Using a Meta Tag to Disable Pinch-to-Zoom

Simply add the following meta tag inside the element.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

What does this meta tag do?
This meta tag will make the initial scale of the website be exactly the same size as the device’s screen and won’t allow any scaling.


If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Leave a Comment


"for responsive sites there is no need because content is already being served up at the appropriate aspect"

That is an idiotic statement.  Disabling zoom prevents users from being able to READ TEXT THAT'S TOO SMALL FOR THEM.  It prevents them from being able to see the details in pictures.

Zooming has been a standard feature on mobile browsers for what, EIGHT YEARS?

This post (as well as the practice it promotes) are an embarrassment.  I'd recommend that you take it down, but actually I say leave it up so no one makes the mistake of hiring you for design work.


Do not do this.  You don't know what the device's pixel size is, and you don't know how good the user's vision is.  Let us keep our zoom!