Одна строчка кода — и сайт снова удобен на мобильных: кейс по восстановлению адаптивной вёрстки

Клиент и проект:

Наш клиент — компания, занимающаяся продажей и установкой систем кондиционирования, вентиляции, увлажнения, осушения и очистки воздуха. Сайт работает на системе управления CMS Made Simple.

Задача:

Восстановить адаптивную верстку сайта.

Диагностика:

В мессенджер написал наш клиент — сайт стал плохо выглядеть на телефоне, помогите понять и решить. Проект разрабатывали мы и ранее он стабильно работал. Клиент переживал, что сайтом банально не удобно пользоваться стало.

Мы уточнили какие работы проводились на сайте, кем и когда. :) Получив ответ, взялись за работу.

При быстрой диагностике сразу обратили внимание на одну из базовых, но критически важных деталей — наличие тега viewport в коде страницы. Многие забывают о нём или случайно удаляют при обновлениях, хотя именно он сообщает браузеру, как масштабировать контент под экран устройства.

Без этой маленькой строчки кода в блоке head даже самая классная адаптивная верстка с идеальными медиазапросами превращается в "тыкву". Мобильные браузеры по умолчанию считают любой сайт старым и десктопным, поэтому они просто открывают его на виртуальном экране шириной в 980 пикселей и масштабируют до размеров телефона.

В итоге пользователи видят микроскопический текст и крошечные кнопки, по которым невозможно попасть пальцем. Именно это и было на экране телефонов.

Тег действительно пропал — вероятно, в ходе технических правок или интеграции сторонних скриптов.

Решение:

Мы оперативно вернули тег viewport в head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

И адаптивность сразу восстановилась: блоки корректно перестроились под мобильный экран, шрифты и кнопки стали удобными для взаимодействия, а общая структура страницы вновь соответствовала задуманному дизайну.

Проблема решилась быстро, без масштабных переделок. Клиент доволен, посетителям удобно.

Этот случай ещё раз напомнил, насколько важны даже небольшие ключевые элементы в веб‑разработке: иногда одна строка кода способна полностью изменить восприятие сайта.

Задача выполнена!

Время работ — 10 минут.

А Вы знали?

Тег viewport — это мета‑тег в HTML, который размещается в секции и задаёт параметры отображения страницы на разных устройствах: он сообщает браузеру ширину области просмотра, масштаб по умолчанию и допустимые диапазоны масштабирования, благодаря чему элементы сайта корректно подстраиваются под экраны смартфонов и планшетов. Без него браузер по умолчанию считает ширину страницы равной стандартному десктопному значению (обычно 980 пикселей), из‑за чего на мобильных устройствах контент либо выглядит слишком мелким, либо переносится непредсказуемо — именно поэтому наличие этого тега критически важно для адаптивной вёрстки и комфортного пользовательского опыта.