Viewport and Media Query Demonstration

The viewport is nothing real new and has been pretty much overlooked as a term and idea until recently. It has now become a new thing (for developers and designers) for creating web pages for mobile devices like smartphones.

What is this page about?

The main purpose of the webpages here is to demonstrate the viewport and how various settings and also HTML elements can change the view and width of the browser. The pages and tests are most valuable when viewed with an iPhone or Android phone and not a desktop browser. The Mediatype and Viewport page have some information and results worth reading and seeing with a desktop browser, though.

What is this viewport?

I have this admittedly long document "Understanding the Viewport" with information about the viewport. Here is quick info what the viewport is.

In terms of mobile devices like iPhone or Android phones we can simply say that a browser is a viewport. The CSS2 specification defines all continuous media user agents as viewports—because a browser qualifies as a continuous media user agent our initial statement is true.

How to change the viewport

Strictly speaking we cannot change the viewport. The user may change the viewport by dragging the width of the browser window on a desktop or rotating the mobile device from portrait to landscape or vice-versa.

As developers we can set a specific viewport. However, this works only in mobile devices—desktop browsers are not aware of this "feature". Setting a fixed viewport width my cause unexpected results with certain devices or browsers but most of all you have to make sure your layout and styles accommodate the fixed viewport. If you don't set a viewport basically all browser will scale the viewport to a default width set by the device. This would be similar to a maximized browser window on a desktop computer.

Use media queries for the viewport

Probably the best way to deal and work with the viewport are media queries. Best of all it is valid practice since long before mobile devices and Apple introduced the viewport meta tag.

With the media query we can pretty much change the settings on the fly. For instance, if the viewport gets bigger we can make the initial font-size larger as well, assuming that a smaller viewport means a smaller device where we need smaller font size to fit our content. If you are looking at this page on a desktop select the viewport page and drag the width below 480px. You should notice that the font-size for the whole page changes. The initial size jumps from 16px to 14px. You will also see two more separate jumps with the header, one is around 600px the other at 800px. Finally, look at the footer while you drag. I use a media query to hide or show a line break for the text.

If this is a smart move depends on your web site and how use the other styles. The possibilities however are virtually endless. The meta tag page has options where you can different settings and see what is happening with certain settings.