I'm sure that many of us meet the problem that your images in the app looks great on iPhone 3G generations, but is missing the crystal sharpness on the iPhone 4 retina display.
Here is how to make your images look Crystal clear on retina display:
To create a good design for both devices you need to create two different images with different size and resolution:
1. one for iPhone that support retina display
2. the same image, but scaled-down/2 for iPhone 3G generation
In above sample code I used a seamless background pattern with 380px x 283px size. I named it samplebg2x.png (the prefix 2x is used for a convenience for retina display images).
After that the same image was scaled down/2 to 190px x142px and I named it samplebg.png I will use it for iPhone 3G generation.
To have a page with a background image, I implemented a CSS class uploading samplebg.png image with 190px x142px size, this class works for 3G iPhone generation:
We can observe that the background-image on iPhone with retina display looks blurry.
For this reason I added a new CSS class, using like background-image the samplebg2x.png with 380px x 283px size, but we need to set this size in CSS style scaled-down (i.e 190px x 142px).
@media only screen and (-webkit-min-device-pixel-ratio: 2)
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<style type="text/css">
#someDiv
{
background-image: url(samplebg.png);
background-repeat: repeat;
width: 190px;
height: 142px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
#someDiv
{ background-image: url(samplebg2x.png);
-webkit-background-size:190px 142px;
background-repeat: repeat;
}
}
</style>
<div id="someDiv" style="width: 100%; min-height: 380px;
text-align: center; padding-top:150px; " align="center">
<div style="background-color:#ffffff; color:#000000;">
Sample design for iPhone 4</div>
</div>
#someDiv
{
background-image: url(samplebg.png);
background-repeat: repeat;
width: 190px;
height: 142px;
}
For this reason I added a new CSS class, using like background-image the samplebg2x.png with 380px x 283px size, but we need to set this size in CSS style scaled-down (i.e 190px x 142px).
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
#someDiv
{ background-image: url(samplebg2x.png);
-webkit-background-size:190px 142px;
background-repeat: repeat;
}
}