Один из ключевых концептов в любом адаптивном дизайне – это изменение размера окна просмотра. Это так потому, что размеры экранов мобильных устройств значительно отличаются от экранов настольных ПК. Для управления размером окна просмотра, мы обычно используем мета-тег viewport.
Тем не менее, мета-тег viewport, как и множество других новых свойств, которые не поддерживаются в некоторых браузерах, не проходят проверку на соответствие стандартам W3C. Изначально этот мета-тег был представлен Apple в Safari, и с того момента был реализован почти во всех других браузерах. В результате мы получаем несоответствующее отображение в разных браузерах.
К счастью, совсем недавно W3C пришли к нам на помощь, и ввели новое CSS-правило @viewport.
Былые времена
Используя старый подход к указанию мета-тега, мы указывали браузеру, в каком размере окна браузера следует отображать контент, следующим образом:
<meta name='viewport' content='width=device-width'>CSS-правило
Совершенно не зависимо от того, валиден ли мета-тег viewport, он представляет собой не данные, а всего лишь их представление. Так что, придерживаясь принципов разделения наших данных и их представления, viewport должен быть указан в CSS, а не в HTML.
W3C-решение в CSS выглядит следующим образом:
@viewport {
width: device-width;
}С другой стороны, вы можете указать viewport цифрой, следующим образом:
@viewport {
width: 640px;
}Вы можете использовать правило @viewport в сопровождении @media queries, чтобы любое окно просмотра больше 960 пикселей, уменьшалось до 960px:
@media screen and (min-width: 960px){
@viewport {
width: 960px;
}
}Дополнительные свойства
Правило @viewport также позволяет нам масштабировать страницу по умолчанию, и даже выставлять максимальный порог увеличения:
@viewport {
width: 960px;
zoom: 1;
max-zoom: 3;
}Также есть возможность полностью запретить масштабирование, установив свойство user-zoom на fixed. Тем не менее, масштабирование, особенно на смартфонах, необходимо для удобства использования, и мы бы не рекомендовали вам использовать это свойство.
Еще одно удобное свойство позволяет нам зафиксировать веб-страницу в пейзажной ориентации или в портретной:
@viewport {
orientation: landscape;
}Браузерная поддержка
Здесь начинаются плохие новости: на данный момент это правило поддерживается только в IE10 и Opera, и требует приставок –ms- и –o- соответственно.
Но несмотря на это, нужно учесть тот факт, что уже есть браузеры, которые поддерживают функционал viewport, а значит, и остальные скоро до этого дойдут.
Заботитесь ли вы о том, чтобы коды соответствовал стандартам? Помогает ли вам W3C лучше влиться в процесс разработки? Пожалуйста, расскажите нам в комментариях.
