Мета-тег viewport говорит браузеру телефона, как разместить страницу на маленьком экране:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width— ширина страницы равна ширине экрана устройства;initial-scale=1— начальный масштаб без приближения и отдаления.
Без этой строки мобильный браузер притворяется десктопом шириной ~980 пикселей и вписывает всю страницу в экран целиком. Получается миниатюра: текст размером с муравья, кнопки, в которые не попасть пальцем.
Mobile-first: почему это критично
Поисковые системы оценивают сайт по мобильной версии. Не «учитывают её тоже» — именно её берут за основу для индексации и ранжирования, потому что большинство людей ищут с телефона. Если на мобильном сайт нечитаем, страдают позиции и в десктопной выдаче.
Практический вывод: контент на мобильной версии должен быть полным. Спрятать половину текста «чтобы не мешал на телефоне» — значит спрятать его от поисковика.
Как проверить
- Пункт аудита «Мобильная адаптация (viewport)».
- Быстрая проверка вживую:
F12→ значок телефона (Toggle device toolbar) → выберите iPhone или любой смартфон. Смотрите на три вещи: не нужно ли увеличивать текст пальцами, нет ли горизонтальной прокрутки, попадаете ли вы в кнопки. - PageSpeed Insights показывает отдельную мобильную оценку — в нашем инструменте «Скорость и надёжность» она тоже есть.
Что чинить кроме тега
Одного viewport мало — он лишь включает адаптивность, а вёрстка должна её поддерживать:
Горизонтальная прокрутка. Появляется из-за элементов фиксированной ширины: широкой таблицы, картинки, блока с width: 1200px. Ищите так: F12 → консоль → выделяйте элементы, пока не найдёте выступающий за экран. Лечится max-width: 100% и обёрткой таблиц в контейнер с прокруткой.
Мелкий текст. Минимум 16 пикселей для основного текста. Меньше — браузер на iOS будет предлагать увеличить масштаб при фокусе на поле ввода.
Тесные кнопки. Палец — не курсор: цель должна быть не меньше 44×44 пикселей, с отступами от соседних.
Всплывающие окна на весь экран. Мешают дочитать и прямо понижаются поисковиками на мобильных.
Тяжёлые картинки. На мобильном интернете каждый лишний мегабайт — это секунды ожидания; здесь же помогают сжатие и кэширование.
Чего не стоит делать
Запрещать масштабирование:
<!-- так не надо -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Это лишает людей со слабым зрением возможности приблизить текст. Претензии к доступности — не только этическая проблема, они учитываются и в оценке качества страницы.