Hi Res Mobile CSS for iPhone 4

25 June 2010

The rise in mobile web traffic since the advent of the iPhone is phenomenal. User Experience and Frontend Engineers have and must continue to provide great experiences on portable devices. By using CSS media queries, many sites have already tailored their look and feel to support the plethora of smart phones that have followed the iPhone’s lead in providing a first-class mobile web browser. As I pointed out in my presentation at BarCamp Chattanooga last year, there are two approaches to targeted CSS for mobile devices. The first is a traditional <link /> with a media attribute and the second is to use the @media query selector in your existing StyleSheet.

The release of Apple’s new iPhone 4 this week has brought an additional challenge to this mix. Just as John Gruber predicted, Apple is no longer mapping CSS px to physical pixels on it’s new device. (Dave Hyatt of the Webkit project first hinted at this years ago.) Why? My guess is to keep sites that have already been customized to the previous iPhones’ 320×480 display working as they have been. What this means in practical terms is that a mobile site (one optimized for an iPhone) viewed on an iPhone 4 appears just as it does on older iDevices, except with better text rendering (honestly, “better” isn’t even the right comparison here) and pixelated graphics. Wait, what?

The Problem

Let’s say you have a link in your site’s header with a logo image set as a background. The image is 64×64 pixels. On an iPhone 4, that same 64×64 area is blown up to 128×128 to compensate for the double density of the device’s display. So is the logo. To be fair, overall the image scaling the device is doing is some of the best I’ve seen; but sitting next to the crispest text on any digital device out there, it looks fuzzy. The problem is less noticeable with JPGs than with PNGs to my eyes; photos in the body of the page were indistinguishably scaled while the graphics applied in CSS (which are all PNGs) looked poor.

The Fix

Fortunately, the fix is straightforward. The first step is to figure out the appropriate media query to target an iPhone 4. Walt Dickinson picked up that part for us based on Hyatt’s aforementioned piece. The second is to create a new version of each graphic that is double the horizontal and vertical resolution of the original (ie, our 64×64 pixel logo will now be 128×128 pixels.) The final step is to overwrite the background-image and -webkit- background-size properties on each of our CSS selectors that have a background-image rule applied. background-image should, obviously, point to our new higher resolution graphic, while -webkit-background-size gets set to the dimensions of the original graphic. You could forgo targeting iPhone 4 separately and just have all of your mobile viewers get the larger image and scale it down, but that significantly impacts the download size of the page to users that gain no benefit from the larger image.

The Code

Here’s a sample of how to do this all in one CSS file:

Besides background images, text-shadow rules also benefit from having their values doubled.

Further Reading

To see some more awesome techniques for adapting layouts using CSS media queries, read Responsive Web Design by Ethan Marcotte and look for “Adaptive Layouts With Media Queries” by Aaron Gustafson in the Summer issue of .net Magazine.