Implementing the ViewPort meta tag

I hope you have read my previous article on the role of viewport meta tag. In this article I am going to explain about the viewport meta tag implementation in responsive design.

The meta tag is defined in the <head> part of a web page. You simply add

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

Now, the content part is actually a comma separated values. Valid values are :

  • width
  • height
  • initial-scale
  • minimum-scale
  • maximum-scale
  • user-scaleable

Javascriptkit has a list of the values and its function in a neat table, which I take a screenshot on and present to you below:

viewport-meta-tag-content-property-and-values

For a better explanation of the values, check out HTMLBoy  post :

Device-width
The most important part of the viewport tag is telling the browser what’s the width of your website. If we code it like this:

<meta name=”viewport” content=”width=device-width”>

we’ll be telling to the browser “my website adapts to your width”. If we use this parameter on a non-responsive site, the website will zoom to the top left corner, forcing the users to zoom out (just to understand where they are) and zoom in to the see the details. Not the best user experience, right?

Initial-scale
Since the browser tends to scale the website, this parameter sets the initial zoom level, which usually means that 1 CSS pixel is equal to 1 viewport pixel (which is not always the same as 1 physical pixel). A responsive site should work without this parameter, but it might help fixing some issues with certain browsers when changing the orientation mode, or preventing a default zooming.

Maximum-scale
Setting a maximum scale means setting a maximum zoom. On a website where the access to the information is the top priority (most, if not all, websites), setting a maximum-scale=1 won’t allow the user to zoom. This might seem unimportant if you have a responsive website, but there are lots of cases when the user might need to zoom: small body font (at least, for the user’s needs), checking some details in a photograph, etc. Don’t trigger an accessibility issue just for aesthetic reasons.

User-scalable=no
This parameter removes the ability to zoom in or zoom out, and it’s even worse than maximum-scale. If there’s a really special reason to use it (e.g., you are coding a web app and need to avoid zooming in form inputs), try adding and removing it with JavaScript, just for the action you want to fix. Anyway, remember that smartphone users are used to zoom in and out any website, so having to zoom out after filling a form might be a default behavior and you don’t probably have to fix it.

Source: HTMLBoy

There is one more thing, because the viewport meta tag is not in the W3C specification, some browser may not respect this meta tag. Which is the case with IE10. In this case you should check the workaround provided by Webdesign Tuts :

The viewport metatag was Apple’s solution to the problem. It was adopted quickly by other platforms, but it was never put forward by the W3C. Microsoft brought this to light when they chose for IE10 to ignore the viewport metatag under certain circumstances. Instead, they opted to use CSS Device Adaptation, which is what the W3C are leaning on.
In short, similar viewport properties are defined within CSS using the @viewport rule, instead of within the HTML.

Source: Webdesign Tuts

So, now you understand the role of viewport meta tag and its implementation. Time to get busy!