Адаптація сайту під Retina Display
І так адаптація сайту складається з двох частин:
- адаптація елементів дизайну самого сайту;
- адаптація контенту.
Адаптація елементів дизайну
Використання шрифтів з іконками для сайту
Ідеально підходить для логотипів, іконок, а також будь-векторної графіки.
Це метод дає найякісніший результат. Але при створенні шрифту потрібно використовувати векторну графіку 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
.