Устройства с экранами высокого разрешения

Устройства и их возможности постоянно развиваются. В действительности мы должны считаться не только с разными размерами областей просмотра. Нам уже необходимо принимать в расчет области просмотра на экранах с более высоким разрешением. iPhone 4 стал первым широко используемым устройством, оснащенным таким экраном. Его дисплей имеет разрешение 960 на 640 пикселов при 326 пикселах на дюйм, что вдвое превышает разрешение экрана предыдущей версии (iPhone 3GS). Кроме того, у него вдвое большая плотность пикселов на дюйм, чем у экранов ноутбуков, например MacBook Pro модели 2011 года с дисплеем диагональю 15 дюймов. Можно ожидать, что примеру экрана iPhone последуют дисплеи многих других устройств — от планшетных компьютеров и ноутбуков до настольных компьютеров. К счастью, наши адаптивные инструменты уже дают нам возможность создавать корректные страницы для отображения на экранах этих устройств.

Допустим, нам необходимо сделать так, чтобы для пользователей устройств с экранами, имеющими высокую разрешающую способность, загружалась версия логотипа сайта с более высоким разрешением. Я сам недавно столкнулся с такой ситуацией, когда вносил изменения в дизайн собственного сайта, располагающегося по адресу http://www.benfrain.com. Вот разметка, описывающая логотип моего сайта:

<div class="logo">

<a href="http://benfrain.com/"></a>

</div>

А вот CSS-правило, загружающее логотип:

#container header[role="banner"].logo a {background-image: url ("…/img/logo2. png"); background-repeat: no-repeat; background-size: contain; display: block; height: 7em; margin-top: 10px;

}

Первоначально логотип выглядел так, как показано На рисунке 9.14.

Логотип моего сайта. Изначальный вариант.

Логотип имел вполне нормальный вид, однако я захотел, чтобы он выглядел как можно более четким на экранах высокого разрешения. Поэтому я создал две дополнительные версии логотипа (одну для состояния по умолчанию, а другую — для выделенного состояния), вдвое большие по размеру, чем уже имевшийся логотип, и присвоил им имена соответственно Logo2@x2.png и Logo2Over@x2.png. Затем я добавил в свой CSS-код следующий медиазапрос:

@media all and (-webkit-min-device-pixel-ratio: 1.5) {

#container header[role="banner"].logo a {background-image: url ("…/img/Logo2@x2.png");

}

#container header[role="banner"].logo a: hover {background-image: url ("…/img/Logo2Over@x2.png");

}

}

Он позволяет нацелиться на устройства с экранами, для которых min-device-pixel-ratio имеет значение 1.5. Следовательно, дисплеи высокого разрешения, как у iPhone версии 4 и выше, попадают в эту категорию и могут обеспечить отображение заданных стилей надлежащим образом. Как видите, приведенное правило включает префикс — webkitКак и всегда, не забывайте о соответствующих префиксах для устройств, на которые вам понадобится нацелиться.

Теперь при просмотре моего сайта на экранах высокого разрешения будет загружаться более высококачественная версия его логотипа, как показано На рисунке 9.15.

Логотип моего сайта. Вариант для устройств с экранами высокого разрешения.

Следует признать, что разницу между отличающимися по качеству версиями логотипа моего сайта трудно заметить на приведенных рисунках. Вероятно, вам лучше самим взглянуть на них вживую. В целом, чем более детализирован рисунок, тем выше вероятность того, что он будет с превосходной четкостью отображаться на экранах высокого разрешения.

Прибегая к такой методике, следует принимать во внимание некоторые особенности. Более крупные по размеру изображения означают более крупные размеры их файлов, а также более длительное время загрузки, в связи с чем повторюсь, что просто потому, что вы можете что-то сделать, вовсе не значит, что вы должны это сделать.

Если устройство поддерживает формат Scalable Vector Graphics (SVG) (Масштабируемая векторная графика), можно устранить многие проблемы с масштабированием изображений, с которыми мы сталкиваемся в настоящее время. Как следует из названия формата, он предназначен для создания рисунков, которые способны четко отображаться независимо от требуемого масштаба. Однако медиазапросы и SVG не помогут, если речь зайдет о встроенных фотографиях для экранов высокого разрешения. В таком случае вам придется прибегнуть к решениям, основанным на JavaScript.

Резюме..

В этой главе мы выяснили, в чем заключается принципиальная разница между прогрессивным улучшением и плавным сокращением возможностей. Затем мы использовали полизаполнение для добавления поддержки медиазапросов в устаревшие версии браузера Internet Explorer, чтобы наш веб-дизайн и в них был адаптивным. И наконец, мы применили Modernizr для условной загрузки CSS и JavaScript-файлов в зависимости от результатов нескольких тестов браузеров на предмет поддерживаемых ими функций, что позволяет нам задействовать полизаполнения и дополнительные либо альтернативные стили только в том случае, если окажется, что браузеры не поддерживают требуемые функции. В завершение мы кратко рассмотрели технологии, которые получат широкое распространение в ближайшем будущем, а также способы использования CSS3 для обеспечения дополнительных возможностей при просмотре сайтов на экранах устройств, которые их поддерживают.

На данном этапе скромный автор этой книги полагает (и надеется), что поведал обо всех методиках и инструментах, которые вам потребуются для того, чтобы приступить к созданию вашего следующего сайта или веб-приложения с применением принципов адаптивного веб-дизайна.

Я твердо убежден, что адаптивные веб-дизайны, создаваемые с использованием HTML5 и CSS3, на данный момент станут наилучшим выбором для разработчиков клиентских приложений при работе с подавляющим большинством сайтов. Предполагая внесение небольших изменений в рабочий процесс, методики и техники, адаптивные веб-дизайны дают нам возможность создавать быстро загружающиеся, гибкие и удобные в сопровождении сайты, которые способны потрясающе выглядеть независимо от размера областей, используемых для их просмотра.

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

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

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