How do you style this css block to be retina ready

I don't know much about the retina thing but I want to catch up with the trend. So how to give style of the css block below to be retina-ready.

.wrapper {
   width: 960px;
   margin: 0 auto;
}
.wrapper img {
   width: 100%;
   height: 400px;
   border-radius: 8px;
}

Code (markup):

I want to put it in here:

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Code (markup):

It should target iPhone 4 device only. And any suggestions on this new thing (to me) are appreciated.
Thank you,

 

Well, for starters you shouldn't be targeting your CSS by device, you should be writing elastic, semi-fluid and responsive so that auto-adapts to ALL devices.

Second, STOP declaring fixed width layouts. If you care about cross-device workings you should be using semi-fluid elastic and responsive layout.

Basically this garbage that we've been told FOR OVER A DECADE TO STOP DOING

.wrapper {
   width: 960px;
   margin: 0 auto;
}

Code (markup):

Means you've already shot your horse in the foot before the gate even opens. Fixed width design using pixel measurements is inaccessible crap and the antithesis of accessible design -- and all the bits of accessible design I'm always on about -- semantic markup, separation of presentation from content, progressive enhancement, semi-fluid elastic design -- they're the stepping stones to making a responsive layout... and if you build a proper semi-fluid elastic responsive layout from semantic markup things like high PPI devices (like Apple's retina tech) should tend to themselves without dicking around trying to target them by device.

Dicking around targeting by device is the type of thing min-width, max-width, em's for fonts and media queries are supposed to be moving us AWAY FROM, not rushing towards head-on with media selector trickery like that -webkit-device-pixel-ratio crap that reeks of little more than recreating the same bull as IE selector hacks from a decade ago.

Which is probably why 99% of my sites start with this:

body {
  font:normal 85%/150% arial,helvetica,sans-serif;
}

.widthWrapper {
  min-width:48em; /* for pre media-query browsers like IE 7 */
  max-width:68em; /* adjust to design */
  width:95%;
  margin:0 auto;
}

* html .widthWrapper {
  /*
    IE 6/earlier doesn't know min/max-width, so shove them a crappy fixed
    width layout -- they should be thankful we think about them at all!
  */
  width:768px;
}

@media (max-width:48em) {
  /*
    Let media query capable browsers go narrower
  */
  .widthWrapper {
    min-width:192px;
  }
}

Code (markup):

Semi-fluid elastic layout for min/max capable browsers, fixed width for legacy piles of ****, smaller min-width for media query capable browsers.

Declaring a fixed width? Halfwit bullshit. Anyone telling you otherwise is blowing so much smoke up your ass you could enter your ribs in a BBQ competition, and probably win.