Итан Маркотт - Отзывчивый веб-дизайн

Табл. 4.1.Характеристики устройств, тестируемых с использованием медиазапросов

Вот вам пример. Когда Apple выпустила свой первый iPad, он поддерживал медиазапрос orientation. Это значит, что вы могли написать запрос orientation: landscapeили orientation: portraitдля обслуживания устройства средствами CSS. Круто, да? К сожалению, iPhone не поддерживал запрос orientation до тех пор, пока несколько месяцев спустя не вышло обновление операционной системы. В то время как все устройства позволяли пользователю изменить ориентацию, браузер iPhone не понимал запросы на эту характеристику.

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

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

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

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

Другими словами, объединяя гибкие макеты и медиазапросы, мы наконец-то сможем сделать наш сайт отзывчивым.

Приступим.

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

Когда в 2007 году Apple выпустила iPhone, она создала новое атрибутивное значение для элемента metaMobile Safari: viewport ( http://bkaprt.com/rwd/29/). Зачем? Размеры дисплея iPhone – 320 х 480, но Mobile Safari фактически отображает веб-страницы шириной 980 пикселей. Если вы когда-нибудь заходили на сайт газеты New York Times ( http://nytimes.com) с телефона с функцией WebKit ( рис. 4.9), вы могли видеть это в действии: Mobile Safari рисует страницу на холсте шириной 980px, а затем сжимает ее, чтобы уместить на экране с разрешением 320 х 480.

Рис. 4.9.По умолчанию браузер Mobile Safari воспроизводит контент с шириной 980px, даже когда вы держите телефон в горизонтальной плоскости и ширина ограничена 320px

При помощи тега viewportмы можем контролировать размеры этого холста и задавать точные размеры области просмотра браузера. Например, мы можем установить фиксированную ширину в 320px:

С того момента, как Apple представила механику viewport, многие разработчики браузеров приняли ее, сделав стандартом де-факто. Давайте попробуем включить его в наш дизайн, который скоро станет отзывчивым. Однако вместо того, чтобы устанавливать фиксированную ширину в пикселях, используем подход, не зависящий от разрешения. В блоке headнашего HTML пишем элемент meta:

Свойство initial-scaleустанавливает уровень масштабирования страницы на 1.0, или 100 %, что обеспечивает некоторую согласованность распознающих viewport браузеров, для устройств с маленькими экранами. (Более детальную информацию по масштабированию под различные мониторы вы сможете найти в объяснении Mozilla: http://bkaprt.com/rwd/30/.)

Большое значение для нас имеет параметр width=device-width, который делает ширину окна просмотра браузера равной ширине экрана устройства. Например, на iPhone область макета Mobile Safari уже составляет не 980px, а 320 пикселей в портретном режиме и 480 – в ландшафтном.

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