Ще зовсім недавно компанія Apple представила світу свої девайси з інноваційним дисплеєм Retina, а у веб-розробників вже з'явилися серйозні проблеми. Справа в тому, що сторінка одного і того ж сайту може виглядати зовсім по-різному на Retina і на звичайному дисплеї. Вся справа в величезному DPI у Retina. Будь-яка графіка починає виглядати замиленою, з явною пікселізацією, адже 1 піксель CSS стає дорівнює квадрату 2 × 2 на Retina. Існують методики підміни графіки на екранах з таким pixel-ratio, але зараз не про це.
Сайти, який побудовано на перевазі CSS над графікою, не настільки болісно поставляться до такого роду перевірок, і, маючи це на увазі, варто задуматися, перш ніж вирізати чергову png або jpg з макета.
підготовка інструментів
Тепер про саму перевірку. Якщо у вас немає Retina дисплея або знайомого, у якого він є, то такого роду перевірку доведеться проводити штучно. Дуже зручно це можна зробити за допомогою букмарклета (для тих, хто не знає що таке букмарклет - це просто рядок js-коду, яку браузер виконає за вашим бажанням). А для користувачів Chrome браузера можна все звести до натиснення кнопки-плагіна.
3) Завантажуємо архів з розширенням для нашого браузера і розпаковуємо його.
4) Тепер в браузері заходимо в Інструменти -> Розширення, і відзначаємо галку Режим розробника (праворуч зверху)
5) Після цього натискаємо "Завантажити розпаковане розширення ...", і в діалоговому вікні знаходимо наш розпакований архів.
Готово. Тепер у нас є кнопка на панелі.
Починаємо емулювати Retina
Для того, щоб випробувати отриманий емулятор потрібно зайти на цільовий сайт і натиснути кнопку плагіна. Якщо все було зроблено правильно, то ви побачите сильно збільшену версію сайту. Приблизно так і буде виглядати ваш сайт і графіка на Retina дисплеї.
