Here is a quick and easy way to make your html/css look good on an old iphone/ipod touch AND a new retina display iphone 4. Just try the following:
1) Add the proper meta tag into the html’s header. This version also locks the scale:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
2) Add references to images where you want them in high-res, retina 2x. Note, the -webkit-background-size is the same as the original
#someDiv {
background-image: url(images/myImage.png);
width: 480px;
height: 140px;
}
// now replace that div's image with the 2x iphone 4 version:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#someDiv { background-image: url(images/myImage@2x.png);
-webkit-background-size: 480px 140px;
//note: the actual image is 960x280
}