Hardware + CSS Pixels in the Age of Retina Display

High-density displays such as Apple’s Retina display are great for end-users, allowing you to view content at resolutions that approach print quality. But they’ve also created complications for web designers, beginning with the definition of what constitutes a “pixel.”

Pixel Practice in Web Design: The “Why?” Behind Virtual Pixels

Suppose your web design calls for a box to be 200 pixels wide. If you display the site on an iPad and put it under a microscope, you’ll see that the box actually measures 400 pixels across. Why? Because when you specify pixel sizes, you’re using “CSS pixels” (sometimes referred to as “virtual pixels”). It’s a unit of measurement—defined by the W3C—that’s distinct from the actual hardware pixels in the display.

The reasoning behind this should be clear. If you define a box as being 200 pixels wide, you want it to look roughly the same whether it’s viewed on a standard display or a high-density one. You don’t want it to look like a postage stamp, which is what would happen on recent iPad models with their 264-ppi displays.

Courtesy of Shutterstock.com

On a standard-resolution display, like the ones on most desktop and laptop computers, CSS pixels and hardware pixels are the same. High-density displays use a multiplier—the pixel ratio—to determine how many hardware pixels constitute a single CSS pixel. The pixel ratio on recent-generation iPads (iPad 3 or later) is 2: Two iPad pixels equal one CSS pixel.

Becoming Pixel Perfect: How Retina Display Changes the Game

Let’s compare the newer Retina displays with the ones on the original iPad:

Even though the newer iPads have twice the resolution, they have the same number of CSS pixels. So if your CSS specifies a font size of 18px for a heading, it still looks like a heading on the newer iPads, but with sharper text because it’s doubling the number of hardware pixels.

The same kinds of comparisons apply when we’re talking about iPhones:

The W3C has a complicated formula to determine the pixel ratio based on display resolution, average viewing distance and viewing angle. Viewing distance plays a part because pixels appear to be larger when the display is closer to your eye. An image that seems crisp when seen at a distance might look pixelated when viewed up close. (A billboard you pass on the way to work could be printed at just 15 dpi.)

The iPad’s resolution is roughly three times that of a standard PC display, so based on pixel density alone, the ratio would be closer to 3. But it’s meant to be held about 15 inches away versus 28 inches for the typical laptop or desktop PC, hence the pixel ratio of 2.

Fortunately, you don’t have to think about the math. The hardware vendor ultimately sets the pixel ratio, and to find it for a given device, you can look it up on various websites, including Wikipedia.

Courtesy of Shutterstock.com

Apple devices have nice, whole-number pixel ratios, but many Android devices have pixel ratios of 1.5. Smartphones with small displays and HD resolution might have a pixel ratio of 3.

You may be thinking, “Phew, I really don’t have to worry about screen resolutions after all,” and this is true—unless of course you’re building a responsive web design and you want to optimize your site for a Retina display. In that case, you’ll add a CSS Media Query that looks like this:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)

You’d generally do this so you can serve high-resolution images to these devices, a topic I discuss in length in another article. As I mentioned in that piece, the current schemes for enabling responsive images are rather cumbersome, but forthcoming enhancements to HTML should make it easier.

As you can see, the query includes two media properties: <min-resolution> and <-webkit-min-device-pixel-ratio>. That’s because WebKit-based browsers such as Safari have trouble handling <min-resolution>, so you need to add the browser-specific property. You can find additional details in Mozilla’s developer documentation.

Now consider this query:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)

Absent references to pixel density, it will target CSS styles to any iPad, with or without a Retina display, because it’s referring to CSS pixels, and in those terms the two are the same.

Want more interactive stimulation? Don’t miss your chance to hear from the industry’s best at the HOW Interactive Design Conference. Coming to a city near you this fall! 

Find out what it means to produce Cutting Edge Web Design with one of our most popular instructors, Brian Wood! Register today.