Коли ми хочемо налаштувати вікно браузера на нашому пристрої, ми, як правило, використовуємо HTML тег . Однак, як не дивно, мета-тег не є «нормативним» - його немає в офіційному стандарті W3C.
Так як мета-тег viewport призначений виключно для настройки розмітки, можна сказати, що він по праву належить до CSS. Саме тому W3C прагне стандартизувати новий метод адаптації, при якому управління вікном переноситься з HTML в CSS.
CSS правило @viewport
З новим правилом @viewport ми маємо те ж саме управління вікном, що і з мета-тегом, за винятком того, що таке управління здійснюється виключно через CSS. Також як і при використанні мета-тега, рекомендується встановлювати ширину вікна браузера, використовуючи не залежну від пристрою device-width:
На сьогоднішній день @viewport використовується програмістами для "snap mode" в IE10 - функція Windows 8, що дозволяє працювати в мультіоконном режимі. Як не дивно, IE10 ігнорує мета-тег, якщо розмір вікна менше 400 пікселів, що призводить до неможливості оптимізації сайтів, які використовують цей мета-тег, до таких маленьким вікнам. Щоб це виправити, програмісти повинні використовувати згаданий вище параметр device-width. або визначити правило @viewport в медіа-запиті.
Використання @viewport в медіа-запитах
Ми можемо використовувати @viewport в медіа-запитах. Наприклад, наступний медіа-запит використовується для настройки розмітки вікна шириною менше 400 пікселів (наприклад, мультіоконний режим в IE10) на ширину 320 пікселів.
В даному прикладі, якщо пристрій налаштовано на діапазон дозволу від 640 до 1024 пікселів, правило @viewport масштабує вікно до 640 пікселів.
Нові дескриптори @viewport
Незважаючи на те, що ми можемо управляти функцією збільшення і масштабування, деякі властивості viewport - або як їх зараз називають «дескриптори» - все ж змінилися.
Дескриптор zoom - це еквівалент initial-scale в мета-тезі. Також як і minimum-scale і maximum-scale. існують дескриптори для max-zoom і min-zoom:
Дескриптор user-zoom еквівалентний параметра user-scalable
підтримка браузерами
На сьогоднішній день css правило @viewport підтримується тільки Opera і IE10. Схоже на те, що скоро Chrome і інші браузери будуть його впроваджувати, тому що очікується, що незабаром цей мета-тег стане новим офіційним веб-стандартом.
Поки що до правилу @viewport необхідно додавати Вендорний префікс:
Звичайно ж, нам до сих пір необхідно включати мета-тег viewport в html сторінку, тому що найближчим часом він нікуди не дінеться. Але вже не так страшно дивитися в майбутнє - додавання правила @viewport всього лише робить наші сайти і додатки future-friendly.