Определение ретины в CSS, SCSS и JS

Достаточно часто возникает задача учесть ретину при разработке своего проекта.

Самый простой способ - это сделать все иконки на сайте в SVG и сбилдить из них шрфит. Например, через сервис icomoon.io

Для картинок в background-image необходимо добавить в CSS правила:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
      background: url('путь картинки в 2x размере') 0 0 / 100px 100px no-repeat;
}

В данном коде 0 0 - это позиционирование, если нужно по центру ставим 50% 50%. 100px 100px - это размер оригинальной 1x картинки, до которой сожмется 2x, чтобы стать в 2 раза плотней.

Тег img и ретина

Если картинка у Вас в теге img, то тут остается способ заменять ее с помощью Javascript.

Определяем ретину с помощью javascript во входной точке приложения и отправляем результат в глобальную переменную.

      function isRetinaDisplay() {
          if (window.matchMedia) {
              var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
              return (mq && mq.matches || (window.devicePixelRatio > 1));
          }
      }

      window.isRetina = {
           'retina': isRetinaDisplay()
      };

      if (window.isRetina) {
            // тут меняем картинки на 2x
      }