Сравнительно многие из новых устройств имеют Retina дисплеи. И это не только apple-device. Для владельцев сайтов, это новая головная боль. Причина? Количество физических пикселей на таких дисплеях больше чем виртуальных(пикселов в css). Проще всего это иллюстрирует картинка.
Т.е. имеющуюся в 2×2 px картинку, броузер вынужден масштабировать в 4х4 px. Выглядит это неаккуратно.
Как вы можете догадаться, слева картинка оптимизирована под Ретина, справа нет.
Первый вопрос, который стоит себе задать, есть ли смысл этим заниматься и какова статистика пользователей с Retina? По некоторым данным примерно 20% пользователей Рунета использует мобильные устройства. Из них пользователей с ретина дисплеями менее четверти. Т.е. всего менее 5%. Для моего сайта цифра около 1-2%. Для сайта одного из бывших клиентов, занимающегося ремонтом iPhone в Ростове-на-Дону, эта цифра уже около 10%. Т.е. для сайтов связанных с мобильными устройствами оптимизация уже актуальна.
Как с этим бороться? Выдавать для таких дисплеев картинку с требуемым разрешением. Сделать это можно как средствами CSS, так и Javasript или php+CSS. Наиболее полный перечень методов описан в статье журнала smashingmagazine . Я же остановлюсь на тех которые можно использовать, для оптимизации под Ретина старых сайтов. Обычно нет смысла оптимизировать все изображения, да и исходники в хорошем качестве трудно найти. Поэтому оптимизация сводится к замене наиболее заметных элементов дизайна. Обычно это лого, различные иконки и кнопки.
С лого проще всего, оно обычно есть в хорошем разрешении. Тогда работает CSS способ.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.logo { background-image: url(logo.png); background-size: 200px 300px; height: 300px; width: 200px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { .logo { background-image: url(logo@2x.png); } } |
Графические кнопки обычно можно заменить на их css аналоги. А иконки можно найти в 2-х разрешениях на каком нибудь ресурсе например iconfinder.com . CSS метод имеет один недостаток, очень трудоемок, много работы на сайтах со сложным дизайном.
Javascript метод проще.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); } }); |
Минус метода в том, что Ретина устройства выкачивают обе версии картинок. К тому же некрасиво будет выглядеть, пока броузер не подгрузит джаваскрипт и новые картинки.
Ну и третий метод серверный, отдавать картинки в большем разрешении через php (или вообще заставить сервер Apache, Nginx). При этом методе надо обязательно указывать width и height картинок явно. Или background-size для картинок в фоне. Ну а поскольку сервер ничего не знает о дисплее юзера используется небольшой javascript хак. Определяем pixel ratio — отношение физического пикселя к виртуальному.
Для Ретина устройств pixel ratio > 1.
Например Nexus One: разрешение 480 физических пикселей и 320 виртуальных, в итоге соотношение 1,5 ,
MacBook : разрешение 2880 физических пикселей и 1440 виртуальных, в итоге соотношение 2,0
Сохраняем в cookies значение и делаем чего нибудь в php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script language="javascript"> //retina if (window.devicePixelRatio > 1) { setCookie('js_retina', window.devicePixelRatio, 30); //redirect if(cookie not set) } function setCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = encodeURIComponent(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value; } </script> <?php if (!empty($_COOKIE['js_retina'])) { //делаем чего нибудь, например грузим картинки с большим разрешением } ?> |
Комбинируя эти три способа, нетрудно оптимизировать под Ретина даже самый древний сайт.
Ну и последний вопрос, как проверить оптимизацию если под рукой нет никакого iPhone или Nexus One. Можно поискать Retina эмулятор в интернетах. А можно воспользоваться обычным Firefox-ом. Используем зуммирование, жмем [control ][+] 4 раза и наблюдаем за интересующей нас картинкой. Каждое нажатие увеличивает на 25%, т.е. 4 нажатия соответствуют Ретина дисплею.
Свежие комментарии