Retina: проводим проверку сайта

Еще совсем недавно компания Apple представила миру свои девайсы с инновационным дисплеем Retina, а у веб-разработчиков уже появились серьезные проблемы. Дело в том, что страница одного и того же сайта может выглядеть совсем по-разному на Retina и на обычном дисплее. Все дело в огромном DPI у Retina. Любая графика начинает выглядеть замыленной, с явной пикселизацией, ведь 1 пиксель CSS становится равен квадрату 2×2 на Retina. Существуют методики подмены графики на экранах с таким pixel-ratio, но сейчас не об этом.

Сайты, который построены на преимуществе CSS над графикой, не столь болезненно отнесутся к такого рода проверкам, и, имея это ввиду, стоит задуматься, прежде чем вырезать очередную png или jpg из макета.

Подготовка инструментов

Теперь о самой проверке. Если у вас нет Retina дисплея или знакомого, у которого он есть, то такого рода проверку придется проводить искусственно. Очень удобно это можно сделать с помощью букмарклета (для тех, кто не знает что такое букмарклет – это просто строка js-кода, которую браузер выполнит по вашему желанию). А для пользователей Chrome браузера можно все свести к нажатию кнопки-плагина.

Начнем с самого букмарклета. Необходимый код находится тут. Все что нужно – это скопировать его и добавить в начало “javascript:“. По сути с этим все, букмарклет готов, но использовать такую длинную строку не очень удобно. Давайте оформим это плагином к нашему Chrome.

1) Заходим сюда

2) Вводим нашу строку в поле и не забываем в начале про “javascript:“. Можете придумать название и нажимаем Generate extension

3) Скачиваем архив с расширением для нашего браузера и распаковываем его.

4) Теперь в браузере заходим в Инструменты -> Расширения, и отмечаем галку Режим разработчика (справа сверху)

5) После этого нажимаем “Загрузить распакованное расширение…”, и в диалоговом окне находим наш распакованный архив.

Готово. Теперь у нас есть кнопка на панели.

Начинаем эмулировать Retina

Для того, чтобы опробовать полученный эмулятор нужно зайти на целевой сайт и нажать кнопку плагина. Если все было сделано правильно, то вы увидите сильно увеличенную версию сайта. Примерно так и будет выглядеть ваш сайт и графика на Retina дисплее.

1 комментарий Retina: проводим проверку сайта

  1. КомпМастер

    Спасибо, очень полезно, теперь буду дополнительно проверять верстку макетов именно так…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">