The iPhone for introduced the high resolution retina display. While native iPhone applications can be built to support this display simply by improving the resolution of their graphics, mobile web developers need to take a 2 phase approach, to ensure that non-Retina users aren't forgotten.
While there are JavaScript techniques that can be employed to handle HTML image tags (swapping them for their high-res counterpart when a high-res screen is detected), we are going to deal only with background images in this post.
The approach:
- Create your high-res background file, preferable as a transparent PNG, containing all of your icons & backgrounds. The sprite approach is recommended for mobile web apps to reduce the overhead required to pull in multiple background images (each requiring their own HTTP connection). This high-res background image should be twice the dimensions required for a typical 320×480 screen.
- Save two versions, a high-res and a normal-resolution. Upload them both to your site. The normal-resolution file should just be reduced to 50%, then saved.
- Apply your CSS rules as normal, using the normal-resolution file.
Now, here's where we introduce the high-res file:
- Using CSS media queries, apply a background-size of 1/2 the size of your high-res image, to all of your selectors that make use of the background image.
- That's it!
Example:
Let's say we have a 512px by 512px high resolution background sprite. We will save two versions of the file:
- bg.png (256px by 256px)
- bg2x.png (original 512px by 512px high-res)
CSS
#header { background: url(bg.png) 50px 50px no-repeat; }
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#header { background-image: url(bg2x.png); background-size: 256px 256px; }
}
Mobile safari will automatically resize your background-image to fit appropriately, while maintaining the resolution of the image.