Understanding The Viewport Meta Tag
When working on a new web design one of things you need to think about is responsive design. Is the website you are about to make going to need a responsive design?
I think all external facing sites should take responsive design into consideration. There are some people who think that responsive design is not worth it as people on mobile devices can zoom in to see what they want, but I feel developers should make a website easy to use on any device.
The viewport meta element is what turns a regular website page into a responsive page, and it’s also one of the number one reason for StackOverflow questions on why their media queries are not working.
What is the viewport element ?
The viewport is a short tag that is included in the head of your HTML document that tells the browser how the page should be rendered. See the Best Practice example below
<meta name=”viewport” content=”width=device-width,initial-scale=1">
This is telling the browser to set the width of the content to the width of the device itself, and to scale that content to 1 on load.
Why do we need it?
When the iPhone was originally released Apple needed it to be suitable to consume websites the way they existed at the time. There was no way an internet browsing device was going to be successful if the websites that were being viewed were too big and the experience was poor.
To solve this problem Apple applied a neat trick within the safari mobile browser to tell the webpage that the content width was 960px — the targeted width for many websites at the time the first iPhone was released.
Changing the values in the viewport will allow you to customize how mobile devices render your website.
There are many options we can include in the content section of the meta viewport.
Viewport Width (sets the width of the layout viewport)
The width that you define in the viewport is like telling the browser this webpage is best viewed in this width. If you have setup a webpage which is best viewed on a iPhone then you will set the viewport to be 320px.
<meta name=”viewport” content=”width=320">
But this isn’t good for responsive designs as if you are viewing this page on a tablet your web page will be zoomed out to just view an area of 320px. The best thing to do for responsive design is to set the width of the viewport to be the same as whatever device is being used.
<meta name=”viewport” content=”width=device-width”>
On mobile devices you can use a pinch gesture to zoom the pages in and out, but if you set the viewport to be the width of the device you don’t need to zoom in to see the web page. To make sure that you web page isn’t zoomed in when initially displayed you can use a property
initial-scale to set the default zoom.
To make sure the user doesn’t need to zoom when visiting your page set this to a ratio of 1.
<meta name=”viewport” content=”initial-scale=1">
If you want to disable your user from scrolling at all you can setup a property maximum-scale to be 1 to make sure you can’t scale anymore.
When you access the website, top priority is
maximum-scale=1, and it won’t allow the user to zoom.
<meta name=”viewport” content=”maximum-scale=1">
Minimum-scale defines the minimum zoom. This works the same as above, but it defines the minimum scale. This is useful, when maximum-scale is large, and you want to set
<meta name=”viewport” content=”minimum-scale=1">
user-scalable= yes(default) to allow the user to zoom in or zoom out on the web page or user-scalable=no to prevent the user from zooming in or zooming out
<meta name=”viewport” content=”user-scalable=yes”/>
If you want to see some examples of using the different viewport sizes there is a good Github project which shows you multiple viewport setups. Clicking on the links is a mobile browser will show you how they look.