Адаптация сайта под Retina Display

Адаптация сайта под Retina DisplayНе так давно я обзавелся макбуком с retina display и сразу понял то, что большинство сайтов вообще никак не дружат с  retina display. На это можно закрыть глаза в нашей стране, где количество устройств с retina display очень мало. Но если ориентировать свои проекты на запад то нужно учитывать специфику таких устройств.

И так адаптация сайта состоит из двух частей:

  1. адаптация элементов дизайна самого сайта;
  2. адаптация контента.

Адаптация элементов дизайна

использование шрифтов с иконками для сайта

Идеально подходит для логотипов, иконок, а также любой векторной графики.

Это метод дает самый качественный результат. Но при создании шрифта нужно использовать векторную графику SVG формат.  Чтобы подготовить SVG файл можно воспользоваться Adobe Illustrator, или другим аналогом (Inkscape, CorelDRAW).

Создать сам шрифт с иконками можно с помощью приложения от google, а именно  icoMoon App

CSS Media Query и свойство background-size

С помощью селектора «min-device-pixel-ratio» определяются устройства с плотностью пикселей 2 и выше, для них подключается картинка в 2 раза больше, а свойство «background-size: cover» сообщает браузеру, что имеющуюся эту картинку необходимо отмасштабировать до размеров блока сохранив пропорции.

.selector { background: url(../path_to_png/apple.png) no-repeat; }
@media (-webkit-min-device-pixel-ratio: 2) {
  .selector { background-image: url(../path_to_png/apple@2x.png); background-size: cover; }
}

Адаптация контента

Изменение URL адреса картинки

jQuery( document ).ready(function(){
   if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){
     var img_to_replace = jQuery( 'img.retina-2x' ).get();
     for (var i=0,l=img_to_replace.length; i<l; i++) {
       var src = img_to_replace[i].src;
       src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1');
       img_to_replace[i].src = src;
    };
  }
});

В HTML коде прописываем тегу <img> необходимый класс, ширину или высоту, чтобы увеличенная картинка не испортила дизайн.

<img class="retina-2x" src="../path_to_png/apple.png" alt="" width="200" height="200"/>

Этот метод использует свойство window.devicePixelRatio для определения экрана с увеличенной плотностью, находит все картинки, которые необходимо адаптировать и заменяет их url на аналогичный, но с дополнением в «@2x».