jQuery Mobile retina display image option?

Question

Is there a simple way to display retina size images on the correct device and the standard on others? i've been search online a some people suggest using a jscript. Basically I want the 32x32 images to load on. Also what size should a retina icon be, 32, 36 width or higher? In comparison to a 16 standard width icon

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-resolution:240dpi){
.shopping_icon
{background-image:url(../images/shop_icon.png);-moz-background-size:776px 18px;-o-background-size:776px 18px;-webkit-background-size:776px 18px;background-size:776px 18px;}

would something like this work?

#track .ui-icon{background:url(../simgs/track_icon.png) 50% 50% no-repeat;background-repeat:no-repeat;width:36px !important;height:36px !important;margin:-5px 0 0 -18px;}
@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (max--moz-device-pixel-ratio: 1.5) {
    #track .ui-icon {
    background: url(../simgs/track_icon.png);
    background-size:36px 36px;
    }
}

Answer 1

The device-pixel-ratio should be 2 for retina. The icon image file should be 36x36 and CSS background-size 18x18 to squeeze it down.

Refer to the last section of this post: http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile