Адаптирование верстки для retina-экранов

Сейчас появляется все больше устройств, оснащенных экранами с повышенной плотностью пикселей, поэтому при верстке современных сайтов (особенно промо-сайтов, лендингов и т.д.) это следует учитывать.

Я не буду углубляться в теорию, а расскажу лишь про практическое применение некоторых приемов.

Основная причина размытости изображений на retina экранах - это недостаточность информации. так как один пиксель изображения отображается на четырех физических пикселах. Иначе говоря, все решения сводятся к тому, чтобы изображения были в 2 раза больше, либо чтобы они отображались в 2 раза меньше (изображение не масштабировалось на retina экранах).

Решение 1 средствами html

используйте изображение в 2 раза больше, жестко указав параметры width и height

<img src="/example2x.png" width="100" height="200" alt="" />

изображение example2x.png должен иметь размер 200x400

Решение 1 средствами JavaScript

Способ аналогичен первому, но немного автоматизирован

$(window).load(function() {
  var images = $('img');
    images.each(function(i) {
      $(this).width($(this).width() / 2);
    });
});

Решение 1 средствами CSS

Если необходимо прописать размеры для фона, а не изображения, то это можно сделать следующим образом:

.image {
  background-image: url(example2x.png);
  background-size: 100px 200px;
  /* Alternatively background-size: contain; */
  width: 100px;
  height: 200px;
}

Но параметр background-size не поддерживается в IE 7 и 8.

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

Поэтому следует использовать 2 изображения, одно - для простых экранов, а второе - для retina-экранов.

Решение 2 средствами CSS

Это относится, в первую очередь, к фоновым изображениям

.icon {
  background-image: url(example.png);
  width: 100px;
  height: 200px;
  
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 1.5dppx){
  .icon {
    background-image: url(example2x.png);
  }
}

где изображение example.png имеет размеры 100х200, а изображение example2x.png - 200х400

Решение 2 средствами JavaSctipt

Подменяем картинки на большие, если это нужно:

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

Да, и в качестве заключения хочется добавить, что retina-дисплей не вполне корректное название, т.к. это маркетинговый термин компании Apple, и формально относился только к ее технике. Однако сейчас он применяется для всех экранов с  повышенной плотностью пикселей.