Адаптивность сайта

Не работает мобильная версия сайта

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

Диагностика

Что ломается
на узком экране

Одна проверка на популярном телефоне не покрывает все случаи. Мы находим диапазон ширин, где появляется ошибка, и проверяем сам блок, его контейнер и соседние элементы.

01

Viewport

Сверяем meta viewport, масштаб, минимальную ширину и элементы с фиксированными размерами.

02

Сетка

Проверяем flex и grid, min-width, перенос текста, таблицы, карточки и причины горизонтальной прокрутки.

03

Навигация

Тестируем кнопку меню, слои, прокрутку панели, фокус и возврат страницы после закрытия.

04

Формы и касания

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

05

Медиа

Смотрим изображения, видео, iframe, карты и виджеты, которые могут сохранять десктопную ширину.

06

Контент и SEO

Сверяем доступность основного текста, ссылок, метаданных и структурированных данных на мобильном URL.

Результат

Ключевой сценарий помещается в экран и остаётся доступным

Нет боковой прокрутки

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

Функции отвечают

Меню, кнопки, формы и виджеты работают касанием и не прячутся под экранной клавиатурой.

Контент совпадает

Телефон получает основные материалы, метаданные и внутренние ссылки, доступные на десктопе.

Порядок работ

Исправляем диапазон, а не один скриншот

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

01

Воспроизводим

Проверяем реальный сценарий и эмуляцию, портретную и альбомную ориентацию.

02

Находим правило

Определяем элемент, медиазапрос, скрипт или внешний виджет, который создаёт сбой.

03

Исправляем локально

Меняем компонент и его адаптивные состояния, сохраняя общую дизайн-систему.

04

Проверяем регрессию

Тестируем соседние ширины, десктоп, формы, навигацию, консоль и критические страницы.

Рекомендации Google по мобильной индексации советуют адаптивный дизайн как удобный для внедрения и поддержки вариант. Важный контент и метаданные должны оставаться доступными мобильному роботу.

Границы работ

Внешний виджет может ограничивать исправление

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

Вопросы

Перед исправлением

Можно исправить только мобильную версию?

Да, если причина относится к адаптивным стилям или мобильному сценарию. После изменения всё равно проверяем десктоп.

Нужен отдельный мобильный поддомен?

Чаще подходит один URL с адаптивной вёрсткой. Отдельная версия требует постоянной синхронизации контента и SEO-настроек.

Почему проблема есть только на одном телефоне?

Причина может зависеть от ширины, браузера, системного масштаба, экранной клавиатуры или поддержки конкретного API.

Как принимается результат?

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

Первый шаг

Пришлите страницу и снимок с телефона

Укажите модель устройства, браузер и действие, после которого появляется ошибка. Этого достаточно для первого воспроизведения.