Когда мобильная версия сайта сломалась, пользователь видит съехавшие блоки, горизонтальную прокрутку, неработающее меню или форму, которую невозможно заполнить с телефона. Чаще всего причина не в телефоне клиента, а в недавней правке CSS, подключенном виджете, конфликте кеша или элементе без нормальных responsive-ограничений.

Начните с проверки проблемной страницы на реальном телефоне и в DevTools. Важно понять, ломается весь сайт или один блок: header, меню, карточки, форма, таблица, изображение или всплывающее окно.

Что проверить в первую очередь

  • Проверьте ширину страницы: есть ли горизонтальная прокрутка и какой элемент ее создает.
  • Откройте последние измененные CSS, JS и шаблоны, особенно правки в header, hero, карточках и формах.
  • Очистите кеш CMS, CDN и браузера, чтобы исключить смешение старых и новых стилей.
  • Сравните страницу на ширинах 360, 390, 414, 768 и 1024 пикселя.

Основные причины

Такая проблема редко появляется сама по себе. Обычно ломается связка из нескольких настроек: данные уходят не туда, событие приходит не в том порядке, старая логика остается в кеше или права проверяются не на том уровне. Поэтому сначала нужно отделить симптом от причины.

  • У блока задана фиксированная ширина, min-width или длинный текст без переноса.
  • Изображение, таблица, iframe или виджет выходит за границы контейнера.
  • Брейкпоинты конфликтуют: правило для планшета перекрывает правило для телефона.
  • Мобильное меню зависит от JS, который падает из-за ошибки другого скрипта.

Пошаговая диагностика

  • В DevTools включите отображение layout и найдите элемент, который шире viewport.
  • Проверьте консоль браузера на JS-ошибки при клике по меню, фильтрам и кнопкам.
  • Временно отключите сторонние виджеты, баннеры, чаты и рекламные блоки.
  • Сравните HTML проблемной страницы с рабочей страницей того же шаблона.
  • Проверьте порядок подключения CSS: новая тема или плагин могли перебить базовые стили.

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

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

  • Уберите фиксированные размеры там, где нужны max-width, width: 100% и адаптивная сетка.
  • Добавьте перенос длинных слов, ограничение изображений и безопасный overflow для таблиц.
  • Разведите правила для мобильного и desktop так, чтобы одно не ломало другое.
  • Почините JS-ошибку, из-за которой не открывается меню или не работает форма.
  • Проверьте результат после сброса кеша и минификации.

Безопасный план решения

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

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

  • Нет горизонтальной прокрутки на основных мобильных ширинах.
  • Меню, кнопки, формы, фильтры и модальные окна работают пальцем, а не только мышкой.
  • Текст не наезжает на соседние блоки, изображения не режутся без смысла.
  • Страница проходит быстрый ручной тест на iOS и Android или в их эмуляторах.

Чего не стоит делать

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

Как не допустить повторения

  • После каждой правки шаблона проверяйте минимум три мобильные ширины.
  • Для карточек, сеток и форм задавайте гибкие размеры, а не фиксированные пиксели.
  • Держите отдельный чек-лист мобильных сценариев: меню, форма, поиск, оплата, заявка.
  • Не подключайте виджеты без проверки, как они ведут себя внутри контейнера.

Что подготовить перед исправлением

  • Ссылку на проблемную страницу, кабинет, заказ, интеграцию или API-метод.
  • Точное время ошибки и пример пользователя, товара, платежа или запроса.
  • Скриншот, текст ошибки, лог веб-сервера, приложения или webhook-события.
  • Краткое описание ожидаемого поведения: что должно было произойти вместо ошибки.

Частые вопросы

Почему на компьютере все нормально, а на телефоне ломается?

На desktop больше места, поэтому фиксированные ширины и длинные элементы могут не проявляться. На телефоне любой лишний min-width сразу создает прокрутку или наложение.

Можно ли исправить только одну страницу?

Да, если проблема в конкретном шаблоне или блоке. Но после правки все равно стоит проверить похожие страницы, чтобы не оставить тот же дефект в другом месте.

Когда стоит обратиться за помощью

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

Итог

Мобильная адаптация чинится быстрее, когда известен конкретный элемент, который ломает ширину или сценарий. Я могу проверить верстку, CSS, JS и кеш, аккуратно исправить мобильную версию и не трогать лишний функционал.