Когда мы хотим настроить окно браузера на нашем устройстве, мы, как правило, используем HTML тег <meta name="viewport">. Однако, как ни странно, мета-тег не является «нормативным» — его нет в официальном стандарте W3C.
Мета-тег viewport был впервые внедрён компанией Apple в iPhone, а затем и другими поставщиками браузеров. Сегодня он широко используется благодаря популярности iOS, Android и других платформ для планшетов и смартфонов.
Так как мета-тег viewport предназначен исключительно для настройки разметки, можно сказать, что он по праву относится к CSS. Именно поэтому W3C стремится стандартизировать новый метод адаптации, при котором управление окном переносится из HTML в CSS.
CSS правило @viewport
С новым правилом @viewport мы имеем то же самое управление окном, что и с мета-тегом, за исключением того, что такое управление осуществляется исключительно через CSS. Также как и при использовании мета-тега, рекомендуется устанавливать ширину окна браузера, используя не зависимую от устройства device-width:
@viewport {
width: device-width;
}
На сегодняшний день @viewport используется программистами для “snap mode” в IE10 – функция Windows 8, позволяющая работать в мультиоконном режиме. Как ни странно, IE10 игнорирует мета-тег, если размер окна менее 400 пикселей, что приводит к невозможности оптимизации сайтов, использующих этот мета-тег, к таким маленьким окнам. Чтобы это исправить, программисты должны использовать упомянутый выше параметр device-width, или определить правило @viewport в медиа-запросе.
Использование @viewport в медиа-запросах
Мы можем использовать @viewport в медиа-запросах. Например, следующий медиа-запрос используется для настройки разметки окна шириной менее 400 пикселей (например, мультиоконный режим в IE10) на ширину 320 пикселей.
@media screen and (max-width: 400px)
@-ms-viewport { width: 320px; }
...
}
В данном примере, если устройство настроено на диапазон разрешения от 640 до 1024 пикселей, правило @viewport масштабирует окно до 640 пикселей.
@media screen and (min-width: 640px) and (max-width: 1024px) {
@viewport { width: 640px; }
...
}
Новые дескрипторы @viewport
Несмотря на то, что мы можем управлять функцией увеличения и масштабирования, некоторые свойства viewport – или как их сейчас называют «дескрипторы» – всё же изменились.
zoom
Дескриптор zoom – это эквивалент initial-scale в мета-теге. Также как и minimum-scale и maximum-scale, существуют дескрипторы для max-zoom и min-zoom:
@viewport {
width: device-width;
zoom: 2;
}
user-zoom
Дескриптор user-zoom эквивалентен параметра user-scalable
@viewport {
width: device-width;
user-zoom: fixed;
}
Поддержка браузерами
На сегодняшний день css правило @viewport поддерживается только Opera и IE10. Похоже на то, что скоро Chrome и другие браузеры будут его внедрять, т.к. ожидается, что вскоре данный мета-тег станет новым официальным веб-стандартом.
Пока что к правилу @viewport необходимо добавлять вендорный префикс:
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
Конечно же, нам до сих пор необходимо включать мета-тег viewport в html страницу, т.к. в ближайшее время он никуда не денется. Но уже не так страшно смотреть в будущее – добавление правила @viewport всего лишь делает наши сайты и приложения future-friendly.