Understanding The Viewport Meta Tag

html5

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.

What Is Responsive Design?

Responsive design is when your website design can adapt to the width and height of the device it is being viewed on. Responsive design is done by using media queries in your CSS file to change the styling of your HTML elements depending on certain breakpoints you setup. Just adding a simple width:100% to some elements is enough to make them responsive when viewed on mobile devices. The breakpoints define a range of widths which will use different CSS styles. This is typically different sizes of devices such as mobile phones, 7 inch tablets, 10 inch tablets, 13 inch laptops and desktop monitors. You can define the breakpoints as either pixel widths or min device pixel ratio. The below code will help you can started with media queries.


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Boilerplate media queries.

Defining The Viewport

The viewport meta tag tells the browser how to behave when it renders the webpage, you can tell it how big the viewport will be. The viewport is the section of the page in view, an example is viewing a web page on a mobile device, if it is zoomed in to display the top left of the page then the viewport has been set to be a certain width. If you can see the entire width of the page but it is zoomed out to fit it all on the screen, then the viewport has been setup to display the full width of the webpage. An example of using the viewport meta tag is below.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This defines that the width of the viewport will be the same as the device you are viewing the website on. The scale of the website will be set to 100% and the maximum scale is set to 100%. Different mobile browsers have different default viewports, most mobile browsers use a default of 980px width viewport which means it will render the webpage in a viewport 980px and will zoom out to fit all of the webpage on. The smaller device screen you view this website on the more zoomed out you will be. If you compare the same webpage on a iPhone and an iPad the iPhone page will zoomed out more than viewing the page on the iPad. Changing the values in the viewport will allow you to customize how mobile devices render your website.

Viewport Width

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">

Viewport Scaling

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.

<meta name="viewport" content="maximum-scale=1">

Examples Of Viewports

The below images show examples of viewing the same image in two different viewports. The first image shows the image in the default viewport 980 pixels, the second picture is the same image but viewed in a viewport of 320 pixels.

Image Source: Apple explanation of viewport meta tag.