Targeting various iOS devices with media queries

87 Notes

Today, I came across quite the conundrum; all Apple devices running iOS 4 return the same user-agent, regardless of it being an iPhone 3G, 3GS or iPhone4.

This created a problem—last week I created an array of pixel-perfect icons for the Campaign Monitor mobile application, and instead of using a single, large image for the webclip icon that shows on the users screen, I wanted to make use of my individually tweaked icons: 57px square for the iPhone 3G and 3GS, 72px for the iPad, and 114px for the iPhone4.

After finding out that the user-agent is the same for all devices running iOS 4, I went about searching for ways to individually target the devices, without much success, until I thought back to an article I was reading yesterday on A List Apart which discussed the use of media queries to load different stylesheets for different resolutions and devices.

After a little bit of trial and error, I put together three simple lines of code which targets each individual device according to the DPI of their screens—163dpi for the iPhone 3G and 3GS, 132dpi for the iPad and a whopping 326dpi for the iPhone4.

Here is the code I used:

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 163dpi)" href="/iOS-57.png" />

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 132dpi)" href="/iOS-72.png" />

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 326dpi)" href="/iOS-114.png" />

Now, a little note here: I used apple-touch-icon-precomposed because I didn’t want the device in question to add the default gloss on top of my icon. For those that do want the extra effects that the OS throws on top of webclip icons, simply use “apple-touch-icon” instead.

For more info on media queries, do check out the A List Apart article, and for an excellent example of media queries in use, take a peek at Jon Hicks’ new journal for a truly superb execution of media queries.