Matcha Design Blog
Thoughts on Media Queries and the iPad 3
Jason Brown - Thursday, March 22, 2012
The line between mobile and non-mobile has been blurry for a while. We have tablets and netbooks that fall somewhere between phones and desktops, and even other devices such as game consoles browsing the web, all with varying screen sizes, resolutions, and densities. Now with the iPad 3, we have a device with a 9.7 inch screen with more pixels than the vast majority of desktop monitors. The typical method for displaying a site across such dispirate screen sizes without having a completely separate mobile version, is using CSS media queries; in particular, the min-device-width and max-device-width queries.
However, min- and max-device-width can't tell the difference between an iPad 2 and an iPad 3. This is because for media queries, the iPad3 reports its resolution as 1024x768 just like the iPad 2. Apple did the same thing with the iPhone 4 - it uses the iPhone 3GS's resolution for media queries. The reason for this is simple; the screen size is the same. If the iPad 3 reported its accurate resolution, sites that had versions optimized for the iPad 2 would treat the iPad 3 as a desktop browser. Moreover, without scaling styles to double the specified size, most sites would be difficult to read. The solution to distinguish one from the other is the media query -webkit-device-pixel-ratio. A value of 2 indicates a retina display, that is, iPad 3 or iPhone 4+. A value of 1 indicates normal screens, but since only certain webkit browsers support this property, you should probably assume 1 and specify overrides for 2.
Most desktops are assumed to have a screen density of roughly 72 ppi (pixels per inch,) meaning that an image 288 pixels in width will take about 4 inches of screen space. At the iPad 3's native density (264 ppi,) the same image would only be slightly more than an inch wide. Therefore, unless specifically told otherwise, the retina display will double the pixel size of elements on a web page. This makes fonts ridiculously clear and sharp, because they're rendered using twice as many pixels. For images however, the benefit of the retina display is lost if simply doubling the resolution. Serving images at double the size to the iPad 3 means that your images are as clear and sharp as the text. The downside is that your images now use four times as many pixels (double the width and double the height,) making the file size much larger and hurting download times. It's up to you to decide how much to optimize in either direction.
In some cases, it really will be necessary to create a completely separate mobile version of your website. Whether you do that or not is entirely up to you and dependent on the details of your individual project. In either case though, you should keep in mind that simply splitting up mobile and non-mobile may be rather limiting. The iPad (along with other tablets) certainly has mobile-like qualities, but it has the screen size to support a more robust site than a phone. With different versions, you have to decide if you want tablets to get the mobile or non-mobile version, or if you want to create a third, tablet-specific version. With media queries, you can adapt to several different screen resolutions, which also has the benefit of being more future-proof.
About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.