---
title: '@viewport'
slug: Web/CSS/@viewport
tags:
  - Adaptation
  - At-rule
  - CSS
  - Device
  - NeedsContent
  - NeedsTranslation
  - Reference
  - TopicStub
translation_of: Web/CSS/@viewport
---
<div>{{CSSRef}}{{deprecated_header}}</div>


<h2 id="Кратко">Кратко</h2>

<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> содержит набор вложенных дескрипторов в блоке CSS, который разделён фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<p>Коэффициент масштабирования, равный 1,0 или 100%, соответствует отсутствию масштабирования. Увеличьте масштаб больших значений. Меньшие значения уменьшаются</p>

<h3 id="Дескриптор">Дескриптор</h3>

<p>Браузеры должны игнорировать непризнанные дескрипторы.</p>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
 <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
 <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
 <dd>Сокращённый дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
 <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
 <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
 <dd>Сокращённый дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
 <dd>Устанавливает начальный коэффициент масштабирования.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
 <dd>Устанавливает минимальный коэффициент масштабирования.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
 <dd>Устанавливает максимальный коэффициент масштабирования.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
 <dd>Управляет тем, должен ли пользователь иметь возможность изменять коэффициент масштабирования.</dd>
 <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
 <dt>Управляет ориентацией документа.</dt>
 <dd></dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Пример">Пример:</h2>

<pre class="eval" style="font-size: 14px;">@viewport {
  min-width: 640px;
  max-width: 800px;
}
@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}
@viewport {
  orientation: landscape;
}</pre>

<h2 id="Specifications">Спецификация:</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
   <td>{{Spec2('CSS3 Device')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами:</h2>

<p>{{Compat}}</p>

<h2 id="Смотреть_также">Смотреть также</h2>

<ul>
 <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
 <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
</ul>