Greetings. I have been experimenting with using Media Queries to swap out images should somebody view the site using a phone with Retina Display. As many times and different ways as Iíve tried this, itís never worked. I am doing something wrong like not using the correct declarations or something Ö maybe Iím missing something from the viewport meta tag?

Basically at the link below, I just have a simple div which uses CSS to select a 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 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. Should be easy to tell if things are working, and so far they are not.
My CSS is a follows:

body { background-color: #ffffff; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 16px; color: #666666; margin: 0; padding: 0; }

#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 Ö

Thanks
| scott