Retina Display на iPad3 установить фоновое изображение с помощью CSS

Question

Я попробовал следующий CSS, но это не помогает на iPad3. На iPad3 умещается только одна четвертая часть изображения. Что происходит?

.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

Ipad 3 имеет пиксельное отношение 2, поэтому ваши медиа-запросы еще не работают. Добавьте min-device-pixel-ratio: 2 к вашему коду.

Дальнейшее чтение: http://halgatewood.com/ipad-3-media-query/

Answer 2

Устройства с дисплеем Retina используют виртуальный видовой экран, где каждый пиксель CSS фактически состоит из двух пикселей устройства. Если вы создадите div размером 100x100px, он будет выглядеть на дисплее Retina того же размера, что и на обычном дисплее, даже если на дисплее Retina он на самом деле 200x200px с точки зрения пикселей устройства.

Обычно это хорошая вещь, но это означает, что ваше изображение с высоким разрешением будет выглядеть таким же большим на дисплее сетчатки, как и на обычном дисплее (то есть слишком большим, чтобы соответствовать). Вам нужно уменьшить его до половины, если вы хотите, чтобы все это было видно.

На обычном дисплее это будет означать потерю разрешения, но поскольку дисплей Retina имеет два пикселя устройства на пиксель CSS, это отменяется, и изображение отображается точно так, как задумано.