Метатег viewport - строка в head страницы, которая сообщает мобильному браузеру, что вёрстку нужно показывать в реальном масштабе устройства, а не как уменьшенную копию десктопной версии. Без него мобильная адаптация просто не сработает, даже если в CSS уже есть гибкие единицы и медиа-запросы.
В этом уроке
Это упрощённая имитация (настоящий эффект метатега проявляется только на реальном экране устройства, а не во вложенном окне блокнота): слева - как выглядела бы страница без метатега viewport, если браузер отрисовал её в масштабе 980px и сжал под маленький экран; справа - тот же текст в реальном размере, как после добавления метатега. Попробуй поменять текст в коде - соотношение размеров сохранится.
Что происходит без метатега viewport
Мобильные браузеры изначально создавались, когда почти все сайты вёрстались только под десктоп. Чтобы такие старые сайты не разваливались на маленьком экране, браузер по умолчанию отрисовывает страницу в невидимой "макетной области" (layout viewport) шириной около 980px - как будто она открыта на большом мониторе - а затем сжимает получившееся изображение целиком под реальный размер экрана. В результате весь текст становится крошечным, и пользователю приходится увеличивать масштаб щипком, чтобы хоть что-то прочитать.
<meta name="viewport" content="width=device-width, initial-scale=1"> - решает эту проблему одной строкой в head.
head без единого метатега viewport - даже идеально написанные media queries и гибкие единицы не спасут: браузер их просто не будет правильно применять к реальной ширине экрана.
Как работают width=device-width и initial-scale=1
У метатега два ключевых параметра, и оба нужны вместе. width=device-width говорит браузеру: используй в качестве макетной области РЕАЛЬНУЮ ширину экрана устройства, а не стандартные 980px. initial-scale=1 задаёт начальный масштаб отображения 1:1 - страница загружается без автоматического уменьшения. Важно понимать: сам по себе метатег viewport не делает сайт адаптивным - он не добавляет ни гибких единиц, ни медиа-запросов. Он лишь позволяет браузеру ПРАВИЛЬНО понимать реальную ширину экрана, чтобы уже заданные три составляющие адаптивного дизайна сработали так, как задумано.
content="width=device-width, initial-scale=1" - стандартный, самый частый вариант этого метатега.
content="width=980" - фиксированное число вместо device-width сводит эффект метатега почти к нулю: результат получится примерно таким же, как если бы тега не было вовсе.
user-scalable=no - плохая идея
У метатега viewport есть параметр user-scalable=no, который якобы "запрещает" пользователю увеличивать масштаб щипком. Раньше некоторые разработчики добавляли его, чтобы страница выглядела "как приложение". Но это реальная проблема доступности: людям с плохим зрением увеличение масштаба может быть жизненно необходимо, чтобы вообще прочитать текст. Из-за этого браузеры сегодня ведут себя по-разному и непоследовательно: на iOS этот запрет игнорируется начиная с iOS 10, а на Android некоторые браузеры (Chrome, Firefox, Edge) всё ещё его учитывают. Значит, полагаться на user-scalable=no нельзя - в лучшем случае он просто не сработает, а в худшем реально помешает части посетителей.
content="width=device-width, initial-scale=1" - без user-scalable=no, масштабирование остаётся доступным всем.
content="width=device-width, initial-scale=1, user-scalable=no" - мешает части пользователей увеличить текст, а на части устройств просто не сработает вовсе.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не добавляют метатег viewport вообще | Мобильный браузер показывает страницу в масштабе ~980px и уменьшает её целиком | Добавить <meta name="viewport" content="width=device-width, initial-scale=1"> в head |
| Путают метатег viewport с самой адаптивностью | Один этот тег НЕ делает сайт адаптивным сам по себе | Использовать метатег ВМЕСТЕ с гибкими единицами и медиа-запросами |
| Добавляют user-scalable=no, чтобы "запретить" масштабирование | Мешает доступности для людей с плохим зрением, а на многих устройствах и не работает | Не отключать масштабирование вообще |
| Указывают в content фиксированное число вместо device-width | Эффект получается почти таким же, как при отсутствии тега | Всегда использовать именно width=device-width, а не число |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Базовый метатег viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| Ширина макетной области по умолчанию (без тега) | около 980px |
| Что делает width=device-width | равняет макетную область реальной ширине экрана устройства |
| Что делает initial-scale=1 | масштаб 1:1 при загрузке страницы, без автосжатия |
| user-scalable=no | не использовать - вредит доступности и работает непоследовательно |
Коротко: отвечаем на вопросы
Что будет, если не добавить метатег viewport?
Мобильный браузер отрисует страницу в невидимой макетной области шириной около 980px, как на десктопе, а затем сожмёт получившееся изображение под реальный экран. Текст станет крошечным, и пользователю придётся постоянно увеличивать масштаб щипком, чтобы прочитать содержимое.
Достаточно ли одного метатега viewport, чтобы сайт стал адаптивным?
Нет. Сам по себе метатег не добавляет ни гибких единиц, ни медиа-запросов - он только позволяет браузеру правильно понимать реальную ширину экрана, чтобы уже написанные адаптивные CSS-правила сработали так, как задумано.
Можно ли отключить масштабирование через user-scalable=no?
Технически можно написать, но полагаться на это не стоит: на iOS браузеры игнорируют этот запрет начиная с iOS 10 из соображений доступности, а на некоторых Android-браузерах он всё ещё работает - то есть поведение непоследовательно, а для части пользователей с плохим зрением такой запрет реально мешает.
