Як підготувати сайт для дисплеїв retina високого дозволу
Після появи пристроїв з дисплеями високого дозволу, наприклад, iPhone, iPad, Samsung Galaxy Note II і, звичайно ж, MacBook Pro з Retina дисплеєм, перед веб-розробниками і просто блогерами постало питання про нормальному відображенні їх сайтів на цих пристроях. Нижче я розповім, як я додав підтримку дисплеїв з високою роздільною здатністю на своїх сайтах.
Retina дисплеї з високою роздільною здатністю
Спочатку треба уточнити, що таке дисплеї з високою роздільною здатністю (Retina - це маркетингова назва для high-resolution дисплеїв, використовуваних в техніці Apple). У звичайних дисплеїв, наприклад, на ноутбуці з діагоналлю в 15 дюймів, роздільна здатність екрану становить 1440 × 900. Це означає - матриця монітора складається з пікселів (точок) і по довжині ця матриця має 1440 точок, а по висоті 900 точок.
Все просто, але з появою hi-res дисплеїв все стало трохи складніше. Для того, щоб людське око бачив не пікселі, а зображення, як на сторінках журналу або на справжній фотографії, з'явилися дисплеї, у яких для тих же 15 дюймів фізична роздільна здатність екрана дорівнює 2880 × 1800 пікселів. Рівно в два рази більше, ніж у звичайного монітора. При відображенні векторної графіки. наприклад, елементів інтерфейсу, шрифтів, рамок, зроблених за допомогою CSS на веб-сторінках, все виглядає красиво і чудово, а ось при відображенні растрової графіки. тобто картинок, не все так гладко.
Проблема з відображенням растрової графіки
На звичайних моніторах картинка 300 на 200 точок також і відобразиться на моніторі - 300 × 200, звичайно ж, якщо її НЕ масштабувати. На hi-res ж матрицях картинку 300 на 200 можна відобразити двома способами.
- Як картинку з роздільною здатністю 600 × 400 пікселів, тоді вона буде займати на екрані рівно стільки ж місця, як і на звичайному моніторі.
- Як картинку з роздільною здатністю 300 × 200, але тоді вона буде на hi-res моніторі займати в два рази менше місця, ніж на звичайному. Тобто вона буде в два рази менше за розміром, тому що hi-res дисплеї, маючи в два рази більшу роздільну здатність, за розміром збігаються зі звичайними дисплеями.
Варіантом за замовчуванням при відображенні веб-сайтів є перший - все зображення збільшуються в два рази. Через що все зображення на сайті: фотографії, а особливо іконки та логотипи - стають розмитими, приклад чого я навів на початку статті.
Для того, щоб ваш сайт відображався ідеально на всіх пристроях, в тому числі і з hi-res дисплеєм, досить все зображення зберігати в два рази більшому розмірі, а в html вказувати актуальний розмір відображення:
або в CSS:
Це найпростіший спосіб, але у нього є недолік - вдвічі більші картинки будуть віддаватися всім користувачам, зі звичайними дисплеями в тому числі. Відображатися вони будуть нормально, також як і звичайні зображення, але трафіку на завантаження таких зображень потрібно в два рази більше, що погано для швидкості і оптимізації, тому краще так не робити.
У WordPress це можна зробити в файлі wp-content / themes / your-theme / footer.php.
Для того щоб довантажувати зображення, які підходять для hi-res дисплеїв, які задані через CSS, використовуються медіа-запити:
Для тих, хто використовує CSS препроцесор. може стати в нагоді миксин. щоб зайвий раз не копіпаст.