Как правильно использовать спрайты высокого разрешения на iOS с CSS?

Вы здесь абсолютно на правильном пути.

По сути, процесс здесь с предоставлением графики «сетчатки» в спрайте через CSS:

• Настройте свой обычный спрайт с соответствующим позиционированием/и т. д. в вашем CSS для подачи на устройства без сетчатки,
• Установите размер фона этого изображения,
• Используйте медиа-запрос, чтобы передать вариант @2x изображения на те устройства, которые его поддерживают.

Есть несколько ключевых моментов, о которых следует помнить:

• для настройки background-size требуется несколько объявлений с разными префиксами поставщиков, чтобы получить наилучшее покрытие браузера — см. мой код ниже, чтобы понять, что я имею в виду
• background-size – это размер варианта фонового изображения без сетчатки, а не размер элемента, внутри которого оно находится. Итак, если изображение спрайта нормального размера имеет размер 200 на 400 пикселей (а версия с высоким разрешением — 400 на 800 пикселей), то вы объявляете 200px 400px.
• background-size значения объявляются как <width> <height>.
• Вы должны объявить background-size в первом объявлении, а не в перезаписи медиа-запроса сетчатки.
• Хотя использование @2x становится общепринятой практикой, в веб-разработке это не обязательно: вы можете использовать совершенно другое имя изображения.

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

В этом примере у меня есть фоновое изображение шириной 100 пикселей и высотой 50 пикселей, которое расположено в середине элемента.

/* the element */
.element{
    background: url(../img/site/background-image.png) 50% 50% no-repeat;

    /* vendor-specfic declarations for background-size */
    -webkit-background-size: 100px 50px;
    -moz-background-size:  100px 50px;
    -o-background-size:  100px 50px;
    background-size:  100px 50px;
}

/* for retina users */
@media screen and (-webkit-min-device-pixel-ratio: 2), 
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2){ 
    .element{
        /* we only over-write background-image here */
       background-image: url(../img/site/[email protected]);
    }
}

Это будет означать, что те устройства, которые попадают во второй медиа-запрос, будут загружать @2x версию фонового изображения и масштабировать его до размеров background-size, как заявлено.

Поскольку изображение уменьшено до установленных вами размеров, если вы используете спрайты, вам нужно объявить все background-positions элемента только один раз, как обычно, а не дважды, чтобы учесть большие размеры графики сетчатки.

РЕДАКТИРОВАТЬ: Теперь, увидев ваш сайт, я точно вижу проблему, с которой вы столкнулись при навигации:

Причина, по которой это выглядит так, это ваш CSS здесь (строка 972 из style2.css):

.pixeljam a, .games a, .team a, .forums a {
    background: no-repeat url('/assets/blogtext2x.png');
}

Если вы измените это на background-image и удалите no-repeat, тогда это сработает (иначе background сбрасывает ваши предыдущие фоновые позиции).

.pixeljam a, .games a, .team a, .forums a {
    background-image: url('/assets/blogtext2x.png');
}