Within the past few weeks, A List Apart came out with an article about the pixel identity crisis. There’s a lot of buzz around the hardware pixel vs the device specific reference pixel and whether or not CSS media queries and device-pixel-ratio can help. I read through that article and realized that it did a really good job at explaining the concepts. Since I’m not a mobile developer at my day job, I haven’t needed to delve very deeply with these issues, but I have had one common itch to scratch.

In most of my desktop web work, I need to at least make the pages that I develop look and behave decently on the iPad/iPhone, if not a wider variety of mobile devices. The boiler plate that I need to worry about is usually the viewport metatag, which has the potential to be very confusing. I haven’t yet found a good tutorial that made initial-scale make half as much sense as pixel ratios do in that ALS article, so here it goes.

The <meta name="viewport"> tag has a content attribute with many different options such as width, min/max-scale and initial-scale.

Width is the most straightforward. It specifies the number of pixels wide that the content of the page is intended to be. If max/min/initial-scale is specified, this is really being used as a minimum viewport width. No matter what, the device user will be able to scroll to see at least this amount of pixels.

Scale on the other hand, takes a little bit more of an explanation. In these explanations, I will be using this 1280x960 image. The image is made up of 10px by 10px squares.

The way that I make sense of scale is with an equation. This equation has 3 variables.

• D = The actual device width, in hardware or reference pixels (320)
• S = The scale value itself (1)
• N = The number of pixels of content actually displayed on the device

The equation that we can use to express the relationship between these number is.



When the initial scale is set to 1, only 320 pixels of the 1280 total width image are displayed. This is because the width of the iPhone device is 320 pixels and 320/1 = 320.



When we double the initial scale, to 2, only 180 pixels are displayed at first.



When the initial scale is reduced to .5, 640 pixels are displayed.



And finally, when the initial scale is reduced to .25, 1280 pixels are displayed.

These images only show initial scale, in order to show how many pixels are displayed at different scales.

A more important lesson from this, is how to use max and minimum scale. If I were to set minimum-scale=.50 in my viewport metatag, my user would never be able to get a closer look than 640 pixels per full portrait width. Personally, I find this always obnoxious when I come across it myself, but I am sure that there are valid uses of it.

Along the same vein. if you set maximum-scale=1, your user would be unable to view more than 320 pixels of width at one time, and they would be forced to pan around to see all of the content.

Lastly, although the example that I am using here is a iPhone, all of this math works out exactly the same for the myriad mobile devices out there.

I’d love to hear what you think in the comments. Also, you can follow me @johnkpaul