Peter-Paul Koch, of quirksmode fame, recently gave an enlightening presentation about the mobile viewport which, quite fortunately for all of us, is available in video and slide form. “A pixel is not a pixel”, clocking in at just over an hour, is quite thorough and enjoyably dense, so watch it. But, if you don’t have an hour to spare, this is the gist of it:
Pixels
First of all, before we tackle viewports and media queries, we need to explore the humble pixel. PPK explains that there are 3 types of pixel. The CSS pixel is the pixel unit that web designers and developers are most familiar with. We set the heights and widths of elements in CSS pixels, but these little units are an abstraction- they can grow and shrink depending on user preferences and zoom level. Device pixels, on the other hand, are inflexible and fixed. Each monitor, phone, and tablet has a finite amount of device pixels- the literal, physical pixel grid that make up the device’s screen. The density-independent pixel, or dip, is an extremely new construct. As device vendors cram more device pixels into their screens, such as the retina-display iPhone, they created the dip as a method of maintaining a degree of consistency. “The number of dips,” PPK says, “is equal to the number of CSS pixels that is optimal for viewing a website on the device at 100% zoom.” In the viewport meta tag, ‘device-width’ is now measured in dips- 320px for both the older iPhones (320 device pixels) and newer retina-display iPhones (640 device pixels).
Viewports
On the desktop, the viewport refers to the browser width. The mobile viewport, however, is a bit more complicated. Since mobile browsers must try their best to render websites properly, even though their screens are so narrow, vendors have split the viewport concept into two. The layout viewport, the equivalent of a page’s <html> element, is typically between 800px and 1000px wide, depending on the device. The default layout viewport width of the iPhone is 960px- when you visit a desktop site on your iPhone, it’ll render as if you were viewing it with a 960px wide browser window. However, your phone is way narrower than that, so something is probably going to get cut off. The visual viewport is literally what the user is seeing on their screen. This is affected by zooming, which crams more of the layout viewport onto the screen, and scrolling, which changes the perceived location of the layout viewport. For those curious, the layout viewport is targeted by document.documentElement.clientWidth and document.documentElement.clientHeight, while the visual viewport is targeted by window.innerWidth and window.innerHeight. By default, the phone will usually display the visual viewport as equal to layout viewport, to show as much of the page as possible.
Media Queries
PPK spoke briefly about media queries; specifically, he mentioned the two media features that play the largest role in responsive design. Device-width represents the width of the device screen in device pixels, which is equal to screen.width. Using media queries to target elements based on device-width, PPK says, is pointless. The width media feature expresses the width of the viewport in CSS pixels, which PPK suggests is much more useful. For mobile, the width media feature represents the layout viewport, or document.documentElement.clientWidth. “Isn’t the layout viewport constant?” you might be thinking, “Isn’t the iPhone layout viewport always 960px? How does that help?” It’s true that, without a bit of help, the width media query feature wouldn’t be remarkably helpful for targeting mobile devices. Viewport meta tag to the rescue!
Meta Viewport
<meta name="viewport" content="width=device-width">
This tag tells the browser to adjust the size of the layout viewport which, by default, is somewhere between 800px and 1000px on most mobile devices. The ‘width’ can be set to a pixel value, or ‘device-width,’ which refers to the screen size in dips. Setting the meta viewport to the correct width, or the device-width, is paramount when creating a functioning responsive site.
The Equation
Meta Viewport + Media Queries = The foundation of a successful responsive site
Final Thoughts
PPK is an informed and passionate speaker, and I highly recommend watching the talk. I do wish that he spoke a bit more about phone orientation, and the other properties that can be set on the viewport meta tag (initial-scale, minimum-scale, maximum-scale, etc). The iPhone, somewhat counterintuitively yet for good reason, retains its device-width of 320px (measured in dips) regardless of the orientation. One way to address this issue is to set an initial-scale or maximum-scale property on the viewport meta tag; however, this solution is not without its drawbacks. Limiting the ability to zoom can be uncomfortable for the user, and we’ve also found, while testing our website on an Android phone, that setting those other properties can have undesirable and unpredictable consequences. Responsive design is not an exact science; luckily for us, there are pioneers like PPK on our side.