Что это
Экраны телефонов физически узкие, но долгое время большинство сайтов создавались в расчёте на гораздо более широкий экран компьютера. Чтобы такие старые сайты оставались пригодными для использования, мобильные браузеры по умолчанию незаметно делают вид, что экран имеет ширину около 980 пикселей — примерно как у компьютера, — а затем сжимают весь результат, чтобы он поместился на экране. Именно поэтому неподготовленная страница может выглядеть на телефоне крошечной и отдалённой, пока кто-нибудь не увеличит масштаб щипком пальцев.
Мета-тег viewport — это одна строка кода, <meta name="viewport" content="width=device-width, initial-scale=1">, которая отменяет это старое поведение по умолчанию и сообщает браузеру: «на самом деле подгони размер страницы под реальную ширину экрана, при обычном масштабе». Именно она заставляет адаптивный дизайн (тот, что подстраивается под разные размеры экрана) действительно работать на телефоне.
Почему это важно
Без этого тега страница, тщательно спроектированная так, чтобы перестраиваться и менять размер под мобильные экраны, никогда не получает такой возможности — телефон отображает её как уменьшенную версию макета для компьютера независимо от того, насколько хорошо на самом деле был построен сам дизайн. Это чисто техническая настройка по принципу «всё или ничего»: тег либо присутствует и указан правильно, либо каждый посетитель с телефона видит неправильный макет, каким бы хорошим ни был дизайн остальной части сайта.
Поскольку больше половины трафика на большинстве сайтов приходит с телефонов, эта одна отсутствующая строка может затронуть большинство посетителей ещё до того, как они начнут читать.
Как это исправить
- Посмотрите исходный HTML-код страницы и проверьте раздел
<head>на наличие тега, начинающегося с<meta name="viewport". - Если он отсутствует, добавьте
<meta name="viewport" content="width=device-width, initial-scale=1">прямо внутри раздела<head>. - Если вы используете конструктор сайтов (Squarespace, Wix, Webflow, WordPress), эта настройка задаётся платформой автоматически — отсутствие тега почти всегда указывает на встроенный пользовательский код, который его перекрывает, поэтому проверьте любой добавленный вами код в разделе
<head>. - Не добавляйте в этот же тег
maximum-scale=1илиuser-scalable=no— эти параметры блокируют возможность увеличивать масштаб щипком, что создаёт отдельную проблему с доступностью. - После этого откройте страницу на настоящем телефоне (или в режиме мобильного просмотра вашего браузера), чтобы убедиться, что она теперь заполняет экран в читаемом масштабе, а не выглядит отдалённой.