Спрайты оптимизированы для дисплея retina

Я создаю адаптивный веб-сайт, поэтому я читал о css-спрайтах на мобильных устройствах и iPhone. Я нашел Эту статью, я думаю, что это правильная техника, но объяснение могло бы быть лучше. Я закончил так:

Http://jsfiddle.net/H9FcH/

Может кто-нибудь сказать мне, нормально ли это выглядит на iphone? Я не уверен насчет этих 50%. Кроме того, есть ли у кого-нибудь статья получше?

1 2
iphone css-sprites retina-display

1 ответ:

Свойство

, указанное вами для устройств с поддержкой Retine, должно содержать размер Не-Retina sprite, то есть половину ширины и половину высоты Retina sprite. Он должен быть размером всего спрайта, а не только одного значка внутри спрайта.

Обновленная Скрипка: http://jsfiddle.net/jhogervorst/qr5fs/2/

Скриншот (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;
        }
}
5