Knowledge Base Overview

The viewport is nothing new and has been pretty much overlooked until recently. It has gained interest by developers and designers who create a web pages for mobile devices like smartphones.

First thing to know and remember if your curiosity is spured by an iPhone or Android project the viewport has nothing to do with the device. Many Google searches come here like this: "android viewport" or "iPhone viewport".

The viewport is the browser and more precisely the window of the browser.

First appearance

I don't think this is the first appearance but the CSS2 specification. Section 9.1.1 has some words about the viewport. In Internet years when CSS2 came about is a long, long time ago, right? Lets have a quick look at this specification's definition of the viewport.

There are quite a few things in this specification we have to understand. First it refers to devices that interpret HTML or CSS documents as user agents and second these user agents are categorized as media types. To grasp media types we have to remember that there are other "things" that understand HTML. Not just web browsers and Web Content Accessibility is the magic term here. So, every piece of software (not device) that can read and understand HTML and CSS is user agent and belong into one of the media types.

Continuous media group

If that isn't enough already the specification combines media types into media groups. The specification has one group labeled as "continuous or paged" and if look around some it defines all continuous media user agents as viewports. Then we also find the media type screen which is a continuous media.

Important note here: This media type screen is not a reference to the monitor or the desktop computer. It is a reference to the software rendering HTML and CSS.

We can therefore assume and say that a browser is a) a user agent, but also b) a continuous media and last but not least c) a viewport.

I give you the <meta> tag

Nobody really cared about the term viewport and this definition in CSS until, according to some sources, Apple "invented" the term. As we now know this is not true, they "only" borrowed the name for their iPhone/Safari browser and invented the viewport meta tag.

As it stands right now the viewport meta tag is not a standard and besides mobile devices has not a real meaning. If you think that your viewport meta tag is ignore it might well be that it is support by that particular browser. Desktop browser simply ignore this tag because they don't know this meta tag.

Lets also note here that Apple decided to specify the iPhone as media type screen and not handheld. Ergo, Android devices are also of media type screen. It does not make things easier at first but I bet Apple's intend was to catch all web pages in their original size.

If you like to know more about the viewport I have some other pages you might be interested in.

How to use the viewport meta tag for mobile device you might like my other document: Understanding the Viewport.

I also have some test pages for the Viewport; however, these pages work best if viewed with a smartphone. There are a few things you can do with a desktop browser but it is not as informative.