Responsive design and retina displays… What should you do?

February 28, 2013

The land of the web is an ever changing environment with new technology and innovations being ushered in seemingly every minute.  Phones are getting smarter, devices more intuitive, and displays are becoming more and more life-like and realistic.  Change is inevitable. The only thing one can do about is to adapt… or in this case respond.

ResponsiveAccording to the almighty Wikipedia, responsive web design is “a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”   There are a few different ways that one can achieve responsive web design mastery, but the one overwhelmingly popular techniques is using CSS3 Media Queries. With that being said, let’s get to the issue at hand.

Media queries are the magic that makes responsive websites happen.  Rather than trying to detect a type of device, they look for the capabilities of a device and certain conditions to apply styles accordingly.  The “standard” way of using media queries would be to target a viewport’s width by using either max-width or min-width and go from there.  Here’s an example:

This way you can target the width of a desktop browser, tablet, or a smart phone and add styles depending on what screen size the user is on. Simple as that. All good in the hood, right? Well, not exactly.

While Mike and I were working on one of our recent web projects, we noticed that the media queries that we had set up in our stylesheet were not working on our iPhones and iPad 3rd gen.  We had tested on our desktop browser, shrinking and stretching our browsers like a rubber band, and everything seemed to fit into place and responded to the size of the screen. So why wasn’t it working on our iDevices?  Where’s the spoon?

A-ha! A-hhaaa! Retina displays. Retina displays have a greater pixel density which in turn make the screen double the size in pixels that it actually is in.  So an iPhone’s screen is 480×320, BUT it’s resolution is 960×640. The iPad 3rd gen’s screen is 1024×768, it’s resolution is 2048×1536.  So now that we figured out the problem, how do we go about fixing it?

Well, lucky for us there is a query that speaks directly to the issue we were having. -webkit-device-pixel-ratio. So in addition to using the usual max-width or min-width to target screen size, we can use -webkit-device-pixel-ratio to target screen densities of specific devices.  In this case we used (-webkit-device-pixel-ratio: 2). Here’s the code.

And voila! Works like a charm. Gameday bucket go boom. There are many different media queries you can use to cater to your specific wants or needs. For more information on media queries, check out http://www.w3.org/TR/css3-mediaqueries/.

Ron de Leon

Ron de Leon is the latest addition to the Fifth Room development team. His love for design and the web helps him find the right balance between the look and functionality of front end development. His weapons of choice are HTML5, CSS3, and jQuery. Catch Ron ramble about music, web stuff, tech and gadgets, food, and sports at http://twitter.com/RonVerbal

My Topics: CSS3, Development, Geek, Web Development, RWD, WordPress

Leave a Reply