Viewport Meta Tag For Responsive Design

Responsive design is gaining more importance thanks to the fastest growth in interest usage using mobile phones and tablets. The web design has to adopt the different layouts looking at the user agent details like browser, desktop or mobile device, etc. It is not very easy to provide such a uniform user interface across all the devices. Good news is that there is lot of new things introduced in HTML5 specification to support the responsive design. One of the new addition introduced by Apple is usage of new meta tag “viewport” in the header section of web pages. Later this tag is adopted by other companies and started supporting in all the browsers. The basic syntax would look like this :

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

The tag name is viewport and main attribute is “content” whicg takes the comma delimated values as the inputs. Theese values are indicating the desired layout design for the web page. Adding this tag simplifies the responsive design by browser itself detect and adjust the page for the client. If you want the width of the page to be displayed on mobile is 400px, your meta tag would look like this.

<meta name="viewport" content="width=400"/>

If you want the page has to be adjusted with the screen size,

<meta name="viewport" content="width=device-width"/>

If you want the page has to be displayed as you want without any zoom,

<meta name="viewport" content="initial-scale=1"/>

If you use the “device-width” value, it would cause a problem while viewing in the landscpe by rotating your mobile device. It is recommended not to give the width size.

However this approach is not yet adopted by the W3C group for making it standard. The CSS equivalent for the above meta tag is look like this:

@viewport{
   zoom: 1.0;
   width: device-width;
}

Microsoft started using the CSS approach and not encouraging to use the meta tag from their IE10 browser. But, it is still a long way to go before making it as the standard approach. If you design a web page, you must consider this meta tag if the page users are from the mobile devises.