CSS адаптация устройства через @viewport

Главная / Блог / CSS адаптация устройства через @viewport

Когда мы хотим настроить окно браузера на нашем устройстве, мы, как правило, используем 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.

Архив
06 июля 2013 в 18:29