Адаптація сайту під 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.