# Viewport / мобайл
_Источник: https://seomatrix.ai/ru/tools/viewport-check/_
---
## Что делает
Мета-тег viewport указывает мобильным браузерам, как масштабировать страницу: строка — стандарт адаптивной вёрстки. Инструмент проверяет у заданного URL тег viewport, theme-color и блокировку зума, потому что Google сначала индексирует мобильную версию сайта: без корректного viewport страница на телефоне рендерится в десктопную ширину, что бьёт и по позициям, и по читабельности.
## Что проверяет
- **Мета-тег viewport** — Тег в , задающий соответствие страницы экрану; без него мобильный браузер берёт десктопный холст ~980px и уменьшает всё содержимое.
- **width=device-width** — Значение, привязывающее ширину макета к реальной ширине экрана устройства — основа адаптивной вёрстки и корректного mobile-first рендеринга.
- **initial-scale=1** — Задаёт начальный зум 1:1, чтобы страница открывалась в натуральную величину, а не приближённой или отдалённой.
- **Блокировка зума (a11y)** — user-scalable=no или низкий maximum-scale отключают пинч-зум — нарушение доступности по WCAG 1.4.4, которое отмечают Lighthouse и Google.
- **Мета theme-color** — Задаёт цвет панели и адресной строки мобильного браузера — небольшой, но реальный сигнал брендинга и удобства на мобильных.
- **Mobile-first индексация** — Google преимущественно сканирует и ранжирует мобильный рендеринг страницы, поэтому сломанный viewport напрямую ухудшает именно ту версию, что попадает в индекс.
## Как пользоваться
1. Вставьте URL страницы и запустите проверку — инструмент загрузит живой HTML и считает из теги viewport, theme-color и атрибуты зума.
2. Разберите найденные проблемы: отсутствующий тег viewport, неадаптивные значения ширины или блокировку зума, нарушающую доступность.
3. Исправьте тег viewport в шаблоне (укажите width=device-width, initial-scale=1 и уберите user-scalable=no) и перезапустите проверку для подтверждения.
## Вопросы
### Что такое мета-тег viewport и нужен ли он?
Мета-тег viewport указывает мобильным браузерам рендерить страницу по реальной ширине устройства, а не по десктопному холсту ~980px. Он нужен любому адаптивному сайту: без строки телефон показывает уменьшенный, плохо читаемый макет.
### Вредит ли SEO отсутствие тега viewport?
Да. Google использует mobile-first индексацию и ранжирует мобильный рендеринг страницы; без корректного viewport эта версия выглядит сломанной и непригодной для использования, что снижает позиции и оценку мобильного удобства.
### Плохо ли отключать зум через user-scalable=no?
Да — блокировка пинч-зума нарушает доступность по WCAG 1.4.4 и отмечается в Lighthouse. Пользователи, которым нужно увеличить текст, не смогут этого сделать, поэтому оставляйте зум включённым и не ставьте maximum-scale ниже 5.
### Зачем нужен мета-тег theme-color?
theme-color задаёт цвет панели и адресной строки в поддерживающих мобильных браузерах, позволяя оформлению совпадать с брендом. На ранжирование он напрямую не влияет, но это простой способ улучшить мобильный UX.