Welcome to a tutorial on how to disable pinch zoom with the HTML viewport meta tag. Having some trouble with your website design on mobile devices? Is it zooming in too much, or zooming out too far? Well, here’s the quick fix.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />to the
But just what is this viewport meta thing, and what does it do? Let us explore more of that in this guide, read on to find out!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TABLE OF CONTENTS
|Download & Notes||Scaling & Viewport||Useful Bits & Links|
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
SCALING & VIEWPORT
So what’s up with the mobile browsers? Why did they intentionally break websites by allowing zoom? This section will explain the mystery and walk through some examples.
WHAT IS A VIEWPORT?
Sadly, a number of websites are still not made for small screen mobile devices. In order to make these non-mobile-friendly websites look as good as possible, the only way is to scale to fit onto the small screen. The mechanism behind this “scale-to-fit” is called a viewport, which is a virtual screen size that the web browser creates to fit websites in. For example:
- The device itself only has a resolution of 1024 X 768 pixels, but the website is 1200 pixels in width.
- In order to fit the website onto the small screen, the browser will create a viewport that is 1200 X 900 pixels in resolution.
- The browser may also scale the text and contents to maintain good legibility.
1) VIEWPORT BASICS
<!DOCTYPE html> <html> <head> <title>Viewport Meta Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <p>This viewport has the same number of pixels as the device, and it is initially scaled at 1:1.</p> </body> </html>
Now that you know what the viewport is, let us start from the basics of the viewport meta tag.
widthis obviously used to set the width of the viewport. In this example, it is set to the native width of the device
- There is also the corresponding
device-height, but browsers will automatically maintain the aspect ratio even if we omit it.
- As some of you sharp code ninjas may have guessed,
initial-scaleis used to control the level of scaling when the page is first loaded. A larger
initial-scalewill mean “more zoomed in”. For example,
initial-scale=2.0will mean 2X zoomed-in.
Lastly, please take note that screen resolution for today’s mobile devices is quite crazy, a small 6″ screen can be full HD or 2K. So even at
initial-scale=1.0, the browser is already doing some automatic scaling to maintain the legibility of the website. I.E. It does not equate to exact pixels, but “what the browser deems to be the best fit”.
2) DISABLE ZOOM WITH META VIEWPORT
<!DOCTYPYE html> <html> <head> <title> No Zoom Demo </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> </head> <body> <p>THOU SHALT NOT ZOOM!</p> </body> </html>
The problem with the above example is that the user can pretty much pinch-zoom in-and-out to however much the device allows. To limit the zoom:
maximum-scalewill control how much the users can zoom in.
minimum-scalewill control how much the users can zoom out.
maximum-scale=1.0pretty much already fixed it to “no-zoom”; The
minimum-scalewill be the
device-widthby default… You add another
minimum-scale=1.0if you like.
user-scalable=nowill further enforce that the users cannot pinch zoom.
3) ALLOW ZOOM IN, NOT OUT.
<!DOCTYPE html> <html> <head> <title> Zoom Limitation Demo </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5" /> </head> <body> <div style="background: #ffe5e0; width: 100px; height: 100px;"> Zoom is allowed up to 1.5X. </div> </body> </html>
Congratulations, code ninja. You now know how to stop people from zooming, but there are also some considerations that you have to make. Not all people have perfect eyesight, and not everyone has big enough screens to display fonts in a legible manner. Sometimes, it is still better to allow a little wiggle room for zooming in.
USEFUL BITS & LINKS
That’s all for this project, and here is a small section on some extras and links that may be useful to you.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />to set an initial scale of 1:1, allow users to zoom in-and-out.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />to disable pinch zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5" />allows some space for zooming in.
LINKS & REFERENCES
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!