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.

Источник