Using the Viewport Meta Tag

Many SmartPhone browsers support the viewport meta tag which controls the logical dimensions and scaling of the browser’s viewport window. In this post, I’m going to describe what is the viewport meta tag and how you can use it in your web pages.

Using the Viewport Meta Tag in my Blog

When I got my HTC HD7 SmartPhone, I wanted to see how my blog was looking in the SmartPhone’s browser. So I entered my blog’s address and this is how it was rendered in my phone:

The view is not so good since the blog is squeezed and it doesn’t look nice at all. So I started to look for a solution and I found the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the SmartPhone browser’s window and tells it that the web page is optimized for mobile. You use the meta tag like in this example:

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

Pay attention that if you use this meta tag, there are some SmartPhones that don’t support it!

Now my blog’s display will look like this in my mobile’s browser:

Since my blog is optimized only for desktop view (it is based on Community Server and the theme isn’t optimized for mobile display), the blog isn’t displayed so well either. So the experiment went wrong but I got to know the viewport meta tag. If you'll look at my blog in your mobile's browser, then you'll get the first display (with no viewport meta tag) which lets you scan my blog, zoom in and out when you find something interesting.

The Viewport Meta Tag Options

The demo shows only two properties of the viewport meta tag which are the width and initial-scale. There are many more options which are:

• width – width of the viewport in pixels. It can also get the device-width (like in the previous example) value which indicates that the viewport should be the current device’s width.
• height – height of the viewport in pixels. Like the width, it can get the device-height value to take the device’s height.
• initial-scale – Sets the initial scaling of the viewport. The 1.0 value displays an unscaled web page.
• user-scalable – Specifies whether the user can scale the web page (zoom in or zoom out). Can get the yes or no values.
• maximum-scale or minimum-scale – Sets the maximum or minimum scaling for the web page. Can get values between 0.25 to 10.0.

Summary

The viewport meta tag enables web developers to indicate that the web page they built is optimized for mobile devices. Most of the new devices support it including iPhone, Android, WebOS, WP7’s Internet Explorer, and more. For further reading about the viewport meta tag, you can go to this link.