@viewport

@viewport — попытка стандартизировать управление параметрами вьюпорта из CSS (ширина, масштаб и др.). Директива из черновика CSS Device Adaptation так и не получила кросс‑браузерной поддержки и сейчас считается устаревшей. На практике вместо неё используют HTML‑метатег <meta name="viewport">.

        
          
          /* Идея директивы */@viewport {  width: device-width;  zoom: 1;}/* Исторический префикс для IE 10–11 */@-ms-viewport {  width: device-width;}
          /* Идея директивы */
@viewport {
  width: device-width;
  zoom: 1;
}

/* Исторический префикс для IE 10–11 */
@-ms-viewport {
  width: device-width;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Эквивалентно (и правильно сегодня) задать в HTML:

        
          
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta name="viewport" content="width=device-width, initial-scale=1">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Синтаксис задумывался как блок с дескрипторами:

        
          
          @viewport {  width: auto | device-width | <length>;  min-width: <length>;  max-width: <length>;  height: auto | device-height | <length>;  min-height: <length>;  max-height: <length>;  zoom: auto | <number>;  min-zoom: <number>;  max-zoom: <number>;  user-zoom: zoom | fixed; /* разрешить/запретить масштабирование */  orientation: auto | portrait | landscape;}
          @viewport {
  width: auto | device-width | <length>;
  min-width: <length>;
  max-width: <length>;
  height: auto | device-height | <length>;
  min-height: <length>;
  max-height: <length>;
  zoom: auto | <number>;
  min-zoom: <number>;
  max-zoom: <number>;
  user-zoom: zoom | fixed; /* разрешить/запретить масштабирование */
  orientation: auto | portrait | landscape;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Однако большинство браузеров эти дескрипторы не поддерживают. Рабочими были лишь префиксные варианты в старых IE (@-ms-viewport).

Задача — управлять поведением мобильного вьюпорта из CSS вместо HTML. Подход не прижился из‑за совместимости, безопасности и перекрытия с уже де‑факто стандартным <meta name="viewport">. В совремённой вёрстке управление вьюпортом выполняют через HTML и медиа‑запросы @media, а размеры интерфейса адаптируют с помощью единиц vw/vh.

💡 Не используйте @viewport в новых проектах — полагайтесь на <meta name="viewport">.
💡 Если поддерживаете IE 10–11, можно добавить блок @-ms-viewport { width: device-width; } как временную совместимость.
💡 Не отключайте масштабирование жестами у пользователей (и в метатеге, и в гипотетическом user-zoom: fixed). Это ухудшает доступность.