Отзывчивый веб-дизайн.

В компании с viewport.

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

Когда в 2007 году Apple выпустила iPhone, она создала новое атрибутивное значение для элемента meta Mobile 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:

<meta name="viewport" content="width=320" />

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

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Свойство 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, предназначенного для этих диапазонов. Кроме того, в этом случае браузеры, распознающие запросы, могут воспользоваться ими, что сделает наш дизайн отзывчивым для всех пользователей, неважно, с какого устройства они его просматривают – с телефона, планшета, стационарного компьютера или ноутбука.

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