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.

Troubleshooting

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.