针对视网膜显示进行了优化的精灵

Question

I'm building a responsive website so I've been reading about css sprites on mobile devices and iphones. I found this article , I think it's the right tecnique but the explanation could've been better. I ended up with this:

http://jsfiddle.net/H9FcH/

Can somebody tell me if it looks ok on the iphone? I'm not sure about that 50%. Also, does anyone have a better article?

Answer 1

The background-size property you specify for Retine enabled devices, should contain the size of the non-Retina sprite , ie, half the width and half the height of the Retina sprite. It should be the size of the total sprite, so not just the size of a single icon within the sprite.

Updated Fiddle: http://jsfiddle.net/jhogervorst/qr5fs/2/

Screenshot (Retina): http://i.stack.imgur.com/sIDnE.png

CSS:

@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) {
        .action {
            background-image: url(http://dl.dropbox.com/u/13823768/masonry/img/test-sprite2x.png);
            -moz-background-size: 153px 64px;
            -o-background-size: 153px 64px;
            -webkit-background-size: 153px 64px;
            background-size: 153px 64px;
        }
}