May 18, 2012 Chances are, if you’re reading this, you are a web developer getting into responsive design. Here is what I’ve found out about

<meta name="viewport">

after a lot of trial and error. It was created by apple to allow developers to specify the default size of the page for mobile devices. In researching the viewport meta tag I’ve found people use different parameters that change how the webpage acts on mobile browsers. The ‘barebones’ version of the viewport meta tag is:

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

Other information can be passed via the content parameter like initial scale, maximum-scale, minimum-scale and scalable. In theory they should work as you’d imagine but on different mobile browsers there are varying results. So here I am going to break down different scenarios, with different viewport meta tag combinations to give you as much information as possible.

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

It is NOT a good idea to include this meta tag with any website built from here on out. Only if you have a mobile version via media queries should you include it. If you include the viewport meta tag for a site that views as the desktop version of the site on a mobile screen, it’s best to just leave it because the viewport meta tag will just mess everything up. Here’s an example: I think having your site look like the desktop version on a phone is ok… A mobile user is used to it and can zoom in where they need to read content or view pictures. I think the KISS principle rules here, less is more and all those other sayings apply to this situation.

content=”initial-scale=1, maximum-scale=1″

So, in theory, this:

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

Should give you everything you need to display your responsive website on all devices properly. But there are some quirky issues that you should know about and it seems you have to choose for yourself how to configure you viewport meta tag because I haven’t found any perfect solution yet. Most of the issues come from turning your phone or tablet from portrait to landscape. And some developers won’t care about the subtle issues that occur, but I’m here to make you at least aware of them. Here are some examples:
Here is a properly coded responsive website with the barebones viewport meta tag like this:

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

This works great on droid devices. And it still allows mobile users to zoom as they like, which I’m a fan of because that’s what people are used to. But, on apple iPhones and iPads there is an issue. The site doesn’t scale properly when rotating from portrait mode to landscape mode. The browser zooms in on the site to have it fill the width in landscape mode. So all the text is bigger, some images become blurry and spacing isn’t right. Some people may stop here and say, ehhhhhh that’s close enough. But if you wanna dig deeper like I did, lets try something else.

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

This is kind of 2 steps forward, one step back. On all devices in portrait view, the site looks great. On droid devices, when rotating to landscape, the site looks great. But on apple devices the viewport messes up when switching from portrait to landscape as seen here (wait, apple released this meta tag and all the issues are on apple products? wtf?): If you load the site in landscape on apple devices, the site will look fine. If you then rotate it to portrait and back to landscape, the viewport will get messed. Let’s take a look at another option:

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

Now, we’re getting somewhere. Immediately, there is one downfall in my eyes. By adding ‘maximum-scale=1′ you loose the ability to zoom on only apple devices. Layout wise, with this viewport setup, we’re in really good shape on all devices. EXCEPT on iPhones. Now I’m not sure if this is intentional because of the loss of the zoom functionality but in landscape view on the iPhone, the text is waaay zoomed in. Seen here:

Conclusion

There you have it. Feel free to comment if you have anything to offer or any other veiwport configurations that offer anything different. In my eyes, the last configuration is the best:

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

And I have to believe that apple did the text zoom feature on purpose in landscape mode because the zoom feature is lost. Hit us up if you’ve found anything better!Tags: meta, mobile design, responsive design, tags, viewport, Web Design