Retina Quality CSS
Setting Up Your Files
Designing for Retina Quality devices such as the iPhone require two sets of images. Let’s take for example this image:
images/myImage.jpg
On a normal device, this would appear at 150×75. But when designing for a device with RQ display, you will need a second image in the same directory, at 300×150.
The Code
Unfortunately, older devices such as the iPhone 3 do not support the same codes that the iPhone 4 and iPad support. This means, we need two separate sets of CSS code. The first set will display the image as it should appear on non-RQ devices.
.myImage {
height: 75px;
width: 150px;
background: url(“images/myImage.jpg”);
}
Now, we have to check to see if the device has an RQ display.
@media screen and (-webkit-device-pixel-ratio: 2) {}
Now simply add your css code inside this check, like so:
@media screen and (-webkit-device-pixel-ratio: 2) {
.myImage {
height: 75px;
width: 150px;
background: url(“images/myImagex2.jpg”);
background-size: 100%;
}
}
Notice the image is myImagex2.jpg. This is your image at double it’s original size, which is resized by the device’s browser to the container’s size, thus doubling the pixels shown.
