"Why does my site look blurry?"
After hours of laboring over a new Drupal theme, you check, double check, compile, and push your code. After emailing your client you sit back anticipating a pat on the back when you hear "Why is it blurry on my iPhone?"
While responsive design goes a long way towards making your site look great on all different sizes of devices it doesn't take into account the device resolution or 'retina' aspect of device its being displayed upon.
What is a "Retina" display?
Retina is the term that Apple uses to describe their high DPI (dots per inch, sometimes seen as PPI, or pixels per inch) screens, which simply means that the individual pixels on their screens are smaller, and there are more of them in a given space. This make text and images more crisp by displaying more detailed information.
It's not just Apple devices
You might think that this is a problem limited to Apple devices based on how heavily Apple market this feature, but there are plenty of other devices out there. Many of the top selling Android phones and tablets would qualify as high DPI too, such as the Nexus S, Nexus 7 and the new Samsung Galaxy S3.
You're going to need something other than a few CSS3 media queries to make your images look good on all the devices out there...