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, i.e., 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): https://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;
        }
}