ВойтиРегистрация

Адаптация под телефон (viewport)

пошаговая инструкция · Быстро: 5–15 минут

← Все инструкции

1. Что произошло

Без настройки мобильного вида страница на телефоне выглядит уменьшенным компьютерным сайтом.

2. Почему это важно

Поисковик ранжирует сайты для телефонов по мобильной версии; неудобный сайт теряет позиции. После исправления: Сайт станет удобен на телефонах, улучшатся позиции в мобильном поиске.

3. На каких страницах обнаружено

Тег meta name="viewport" в head главной страницы.

Чтобы увидеть адреса на вашем сайте, откройте инструкцию из отчёта или добавьте домен в адрес: /fix/viewport/ваш-сайт.ru.

4. Как исправить

Для WordPress

  1. Современные темы содержат тег. Если его нет, добавьте в header.php перед wp_head() или смените тему на адаптивную.

Общее для любого сайта

  1. Добавьте в head тег viewport — без него телефон показывает страницу как уменьшенную копию версии для компьютера.
  2. Проверьте сайт в режиме мобильного устройства в Chrome (F12 → иконка телефона): текст читается без увеличения, нет горизонтальной прокрутки, кнопки не меньше 44 px.
  3. Если вёрстка не адаптивная, нужна новая тема или доработка CSS (media queries).

5. Готовый код

Замените example.com на свой домен. Перед правкой конфигурации сделайте резервную копию файла.

Любой сайт

Тег в head
<meta name="viewport" content="width=device-width, initial-scale=1">

6. Как проверить результат

  1. Тег виден, а в мобильном режиме браузера нет горизонтальной прокрутки.
  2. Нажмите «Перепроверить сайт».
Тег
curl -s https://example.com/ | grep -io '<meta[^>]*viewport[^>]*>'

Чтобы перепроверить сайт, откройте отчёт и нажмите «Проверить заново».