Greetings. I have been experimenting with using Media Queries to swap out images should somebody view this site using a phone with Retina Display capabilities. As many times and different ways as I’ve tried this, it’s never worked. I have cross referenced my CSS with w3.org (http://www.w3.org/TR/css3-mediaqueries/) and appear to be doing everything correctly.

To test this at the link below, I just have a simple div which uses CSS (background-image) to select it's background image. Now when somebody uses, say an iphone 4s, It would swap in an image twice the size and re-size it at 50% of its original size so that it appears nice and sharp for viewers with a retina display device.

What I did for testing to make it obvious the swap has occurred, is, I wrote the word “Retina” in large letters over the high-res version of the image. This way it will be very obvious to tell if things are working.

My CSS is a follows:


/* Main CSS */
#mainDiv { width:320px; height:200px; background-image:url(img/image1.jpg); background-repeat:no-repeat; }

/* Retina Optimization */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {

#mainDiv { background-image:url(img/image1@2x.jpg); background-size:320px 200px; }

}

Dev URL is: http://www.savagepixels.com/retina/index-retina.html

The higher res version of the image is image1@2x.jpg.

Does anybody see what I am missing? Seems like it should be a pretty simple deal. And who knows? Maybe it's actually working everywhere but on my iPhone. I'd never know, would I?

Thanks a million.
| scott