Исполняемые доки HTML: Meta viewport

Q: Какой стандартный мета-тег viewport?

, внутри . Это правильный выбор почти для любой адаптивной страницы.

Q: Почему meta viewport не работает?

Проверьте, что тег стоит в , что name равен viewport, а значения разделены запятыми. Если страница все равно прокручивается вбок, какой-то элемент шире экрана, например фиксированная ширина, большая картинка или длинное слово; тег не может исправить CSS, который шире устройства.

Какой тег использовать

Поставьте эту строку в <head> каждой страницы:

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

width=device-width делает раскладку шириной с экран, а initial-scale=1 открывает страницу с масштабом 100%. Большинству сайтов больше ничего не нужно. Полная страница с этим тегом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

Скрипт читает тег и ширину раскладки. Браузеры на компьютере игнорируют тег viewport, поэтому в этом превью ширина просто равна ширине блока превью. На телефоне тот же файл сообщит ширину телефона (обычно от 360 до 430 пикселей CSS) благодаря тегу.

Что делают телефоны без него

Мобильный браузер, не нашедший тега viewport, предполагает, что страница сделана для компьютера. Он строит раскладку шириной около 980 пикселей, а затем уменьшает все целиком под экран. Два имитированных телефона ниже загружают одну и ту же страницу, один с раскладкой 980px, другой с шириной телефона, и оба масштабированы до одного размера:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

На первом телефоне текст размером 16px становится крошечным, и читателю приходится увеличивать его жестом. На втором он остается читаемым, а столбцы выстраиваются друг под другом, потому что срабатывает правило @media (max-width: 600px). В этом вторая задача тега: медиазапросы видят ширину раскладки, поэтому без тега телефон сообщает 980px, и ваши мобильные стили никогда не применяются. Замените 375 на 980 в show('with', 375), и оба телефона будут выглядеть одинаково.

Тег это только половина работы

Тег viewport дает узкую раскладку; ваш CSS должен в нее поместиться. Один элемент с фиксированной шириной больше экрана заставляет всю страницу прокручиваться вбок:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

Первый блок прокручивается вбок; второй сжимается под размер. Задайте картинкам и другим широким элементам max-width: 100% и предпочитайте гибкую ширину (проценты, fr, flexbox) фиксированной ширине в пикселях.

Значения viewport

Значение	Пример	Что делает
`width`	`width=device-width`	Ширина раскладки. `device-width` это ширина экрана в пикселях CSS; можно указать и число, но это редко хорошая идея.
`initial-scale`	`initial-scale=1`	Масштаб при открытии страницы.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Ограничения масштабирования. Маленький максимум запрещает увеличение, поэтому `maximum-scale` лучше не указывать.
`user-scalable`	`user-scalable=yes`	Разрешено ли увеличение жестом. Не указывайте его.
`viewport-fit`	`viewport-fit=cover`	Позволяет странице заходить под вырез экрана или скругленные углы, вместе с отступами `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	Как экранная клавиатура влияет на раскладку. Поддерживается в Chrome на Android.

Значения разделяются запятыми. Страница, которая заполняет весь экран на телефонах с вырезом, выглядит так:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

Не запрещайте масштабирование

В старых шаблонах можно встретить такой тег:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Он запрещает увеличение жестом, от которого зависят люди со слабым зрением, и инструменты проверки доступности, например Lighthouse, отмечают его как ошибку. Safari на iOS игнорирует user-scalable=no, так что тег даже не работает одинаково везде. Если поле формы на iPhone увеличивается при касании, причина в размере шрифта поля меньше 16px; задайте полю font-size не меньше 16px, а не отключайте масштабирование.

Частые ошибки

Забытый тег. Без него адаптивные стили ничего не делают на телефонах, потому что медиазапросы видят раскладку шириной 980px. Поставьте его рядом с тегом title в шаблоне страницы.
Точки с запятой между значениями. Используйте запятые: width=device-width, initial-scale=1.
Жестко заданная ширина, например width=375. Экраны бывают разными; используйте device-width.
Запрет масштабирования через user-scalable=no или maximum-scale=1.
Вина тега в прокрутке вбок. Найдите элемент, который шире экрана, и дайте ему гибкую ширину.

Часто задаваемые вопросы

Что делает мета-тег viewport?

Он сообщает мобильным браузерам, какой ширины должна быть раскладка. Без него большинство телефонов строят страницу шириной около 980 пикселей CSS и уменьшают ее под экран. С width=device-width раскладка совпадает с шириной экрана, поэтому текст читается, а медиазапросы работают.

Какой стандартный мета-тег viewport?

<meta name="viewport" content="width=device-width, initial-scale=1">, внутри <head>. Это правильный выбор почти для любой адаптивной страницы.

Почему meta viewport не работает?

Проверьте, что тег стоит в <head>, что name равен viewport, а значения разделены запятыми. Если страница все равно прокручивается вбок, какой-то элемент шире экрана, например фиксированная ширина, большая картинка или длинное слово; тег не может исправить CSS, который шире устройства.

Стоит ли использовать user-scalable=no или maximum-scale=1?

Нет. Оба запрещают масштабирование, на которое полагаются многие люди со слабым зрением, и не проходят проверки доступности. Safari на iOS все равно игнорирует user-scalable=no.

Влияет ли meta viewport на браузеры на компьютере?

Нет. Браузеры на компьютере его игнорируют; ширина раскладки там просто равна ширине окна. Тег важен на телефонах и планшетах.

Связанные концепции