Knowledge Base Overview

The viewport has become a new thing for developers and designers when creating web pages for mobile devices, aka smartphones, like iPhone, Android or even iPod and iPad. However, the viewport is nothing real new and has been pretty much overlooked as a term and idea until recently.

Here's the first little secret you need to know. The viewport is just a generic term in specification for what we usually know as a web browser. The only new thing is the viewport meta tag first seen with Apple's iPhone.

If you like to know more about the "history" of the viewport you can read my other document titled Viewport History. This page is about how you can use the viewport in your project.

A few words first

If your curiosity is spurred by an iPhone or Android project here's a first important thing to remember: The viewport has nothing to do with the device. The viewport is the browser or more precisely the window of the browser. At first, this may sound wrong for a smartphone but it is not.

If you have an iPhone or Android smartphone you can test things in my Viewport Demo pages. Note that most demonstrations are only valuable (i.e. work) when you view them with an iPhone or Android phone browser and not a desktop browser.

Viewport and media queries

Now, this may come as a first surprise for you. We don't have to worry too much about the viewport. We could live and work without knowing about it. That's because we don't usually deal with the viewport directly—we deal with the media type.

A viewport is defined as a media type and therefore we access a viewport as a media type. Our primary choice for access is usually CSS, cascading style sheets. In CSS we deal with media types through the media queries. If you need some background about this you should really read my other document Viewport History.

The media query can be used to "query" some information from the media type. If the media type is screen we usually deal with a web browser. Conversely it is the browser's responsibility to say how big it's window is; the window is the viewport.

I use media queries in my Viewport Demo page to show the width of the browser window; which as we know now is also the viewport. If you go to that page with a desktop browser you can drag and re-size the window. You will see how the pixels number changes according to the width.

Now that we know a little bit about the media queries lets talk about browsers in mobile devices. Lets keep in mind that the browser is also a media type (screen) and the viewport.

Browsers in Mobile Devices

Okay, so most people will realize immediately one thing and point out that you cannot re-size the browser window in a mobile device. Does this mean the browser has a fixed dimension and if yes how many pixels does a browser or viewport have on a certain device? The answer is no, there is no burned in pixel width with any device or browser! There are quite a few factors weighing in for determining the width of the viewport.

<meta> tag

Thanks to Apple we have the <meta> tag with name="viewport". It helps to some degree control the size of the viewport. The meta tag's content value can have two name/value pairs—width and initial-scale are the names.

<meta> tag: width

The width as you might guess sets the width for the viewport. The value must be a numeric value (integer) or "device-width" (string). The number forces the browser to have the set width and calculate everything from this value. Note that this width will be the same in portrait and landscape, which could be a little bit problematic. The "device-width" forces the browser to take a value provided by the device. Because this depends on the device the value may or may not change from portrait to landscape mode.

<meta> tag: initial-scale

The initial-scale sets something you can think of as the initial zoom level but scale in terms of the canvas is the correct term. Initial means how the page loads and is presented; the user can still zoom in/out with gestures.

The value is a numeric value where 1 is something like default and <1 is scale (zoom) out and +1 is scale in. If you take an iPhone or iPod touch your viewport at a scale of 1 will be either 320 (portrait) or 480 (landscape). At 0.5 these values change to 640/960 and at 0.25 to 1280 and 1920. Wee, High Definition! No, not really. Also, a value of 2 squishes your viewport and screen to 160 or 240 pixels in width. Android phones will have similar but not the same results.

If you like to see a useful demonstration of the viewport and test your mobile device and browser you can use my test page (/Viewport-Demo/metatag) to verify. Note it does not show anything relevant if you try it with a desktop browser because they do not care about the viewport meta tag.

So, "How do you use the meta tag?", you wonder. Easy as with all meta tags this goes into the header

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

Do not use this particular setting, though. I believe the best setting for all devices is "initial-scale=1". Use my test page to try it out and see for yourself.

If you limit the screen to a special width you will force the users to constantly re-size their screen. This is especially true in combination with an initial-scale.

HTML elements width

An important thing has not been mentioned yet, but it is about time now. While the settings in the meta tag define the default width, any element which is greater in size has an influence on the overall width of the browser window. We suddenly have the browser width separated from the viewport width!

It is best to understand with an example: If you set the viewport width to 800px but you have a 1000px element in your web page then the default width, e.g. for calculating a 100% width, is 800px; the viewport sets the default width! But, the window overall has, of course, a width of 1000pixels.

With my test page I also have some settings where you can set a specific width to elements.