Retina display on iPad3 set background image using css

Question

I tried the following css, but it doesnt help on iPad3. Only one fourth of the image fits on iPad3.What is going wrong?

.titleIcon {
  float: left;
  background: url(/images/sprite.png);
  background-position: 0px 0px;
  width: 16px;
  height: 16px;
}



@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 3/2),
only screen and (        min-device-pixel-ratio: 1.5){ 

    .titleIcon{
        float: left;
        background: url(/images/sprite-2x.png) no-repeat 0 0;
        background-position: 0px 0px;                   
    }

}

Answer 1

The ipad 3 got a pixelratio of 2, so your media queries don't work yet. Add min-device-pixel-ratio: 2 to your code.

Further reading: http://halgatewood.com/ipad-3-media-query/

Answer 2

Devices with a retina display use a virtual viewport where each CSS pixel is actually made up of two device pixels. If you create a div that is 100x100px, it will look the same size on a retina display as it does on a regular display, even though it's actually 200x200px on the retina display in terms of device pixels.

Usually this is a good thing, but it means your extra high resolution image is going to look just as big on the retina display as it would on a regular display (i.e. too big to fit). You'll need to scale it down to half the size, if you want the whole thing to be visible.

On a regular display, this would mean losing resolution, but because the retina display has two device pixels per CSS pixel, this cancels out and the image is shown exactly as intended.