Viewport
Сверяем meta viewport, масштаб, минимальную ширину и элементы с фиксированными размерами.
Адаптивность сайта
Не работает мобильная версия сайта
Воспроизводим проблему на нужной ширине и устройстве, проверяем вёрстку, навигацию, формы и загрузку ресурсов. Исправляем мобильный сценарий без случайных изменений десктопной версии.
Диагностика
Что ломается
на узком экране
Одна проверка на популярном телефоне не покрывает все случаи. Мы находим диапазон ширин, где появляется ошибка, и проверяем сам блок, его контейнер и соседние элементы.
Сетка
Проверяем flex и grid, min-width, перенос текста, таблицы, карточки и причины горизонтальной прокрутки.
Навигация
Тестируем кнопку меню, слои, прокрутку панели, фокус и возврат страницы после закрытия.
Формы и касания
Проверяем размер активной области, типы полей, экранную клавиатуру, валидацию и видимость сообщения.
Медиа
Смотрим изображения, видео, iframe, карты и виджеты, которые могут сохранять десктопную ширину.
Контент и SEO
Сверяем доступность основного текста, ссылок, метаданных и структурированных данных на мобильном URL.
Проверка сценария
Воспроизводим мобильную ошибку в действии
Снимок помогает найти обрезанный блок, но для ошибки касания нужна последовательность действий. Укажите страницу, элемент и момент сбоя: открытие меню, ввод телефона, поворот экрана или возврат из приложения оплаты. Сохраняем условия проверки.
Экранная клавиатура
Открываем форму и заполняем поля на устройстве. Проверяем, видны ли ошибка и кнопка отправки после появления клавиатуры. Фиксированная панель может перекрывать поле, хотя на снимке страницы без клавиатуры всё выглядит правильно.
Слои и окна
Проверяем меню поверх шапки, открытие окна и его закрытие. Следим за блокировкой прокрутки: после закрытия посетитель должен вернуться к странице. Проверяем возврат фокуса и отсутствие невидимого слоя, который перехватывает касания.
Длинный контент
Используем длинное название товара, ссылку и сообщение об ошибке. Проверяем переносы внутри карточки, таблицу и медиа. Скрытие горизонтального переполнения всего документа может обрезать кнопку; исправляем размеры и ограничения конкретного компонента.
Настройки устройства
Проверяем увеличение текста и смену ориентации. Если проблема появляется только в браузере одного устройства, сверяем поддержку используемой функции. Эмуляция ширины помогает найти дефект сетки, но не заменяет проверку клавиатуры и системных жестов.
Приёмка адаптивности
Фиксируем результат на контрольных страницах
Для отдельного сбоя навигации смотрите исправление меню. Ошибки отправки обращения разбираем в разделе восстановления формы заявки.
Какие размеры проверяем?
Согласуем узкий экран, обычный телефон, планшет и десктоп. Добавляем ширину, на которой возникла ошибка, и соседние значения. Сохраняем снимки и действия для повторной проверки после обновления шаблона.
Можно убрать блок только на телефоне?
Сначала определяем его роль. Основной текст, адрес и важные ссылки должны оставаться доступны. Для компактного представления используем подходящий компонент и проверяем открытие его содержимого, вместо удаления нужной информации.
Что передаём после исправления?
Список изменённых компонентов, проверенных браузеров и известных ограничений. Проходим исходное действие, форму и навигацию; отдельно сверяем десктоп. Проверка завершена, если согласованный сценарий работает без обрезанных элементов и потери содержимого.
Результат
Ключевой сценарий помещается в экран и остаётся доступным
Нет боковой прокрутки
Контейнеры, таблицы и медиа адаптируются к ширине без обрезанных элементов управления.
Функции отвечают
Меню, кнопки, формы и виджеты работают касанием и не прячутся под экранной клавиатурой.
Контент совпадает
Телефон получает основные материалы, метаданные и внутренние ссылки, доступные на десктопе.
Порядок работ
Исправляем диапазон, а не один скриншот
Пришлите URL, модель телефона, браузер и снимок ошибки. Мы определим ширину появления дефекта и проверим соседние контрольные размеры.
Воспроизводим
Проверяем реальный сценарий и эмуляцию, портретную и альбомную ориентацию.
Находим правило
Определяем элемент, медиазапрос, скрипт или внешний виджет, который создаёт сбой.
Исправляем локально
Меняем компонент и его адаптивные состояния, сохраняя общую дизайн-систему.
Проверяем регрессию
Тестируем соседние ширины, десктоп, формы, навигацию, консоль и критические страницы.
Рекомендации Google по мобильной индексации советуют адаптивный дизайн как удобный для внедрения и поддержки вариант. Важный контент и метаданные должны оставаться доступными мобильному роботу.
Границы работ
Внешний виджет может ограничивать исправление
Если дефект находится внутри закрытого iframe, карты, формы оплаты или виджета поддержки, доступные стили сайта не изменят его внутреннюю вёрстку. Тогда проверяем настройки поставщика или замену компонента. Старый шаблон с фиксированной шириной иногда требует переработки нескольких общих блоков, а не одного медиазапроса. Перед изменением шаблона делаем резервную копию и согласуем контрольные страницы.
Вопросы
Перед исправлением
Можно исправить только мобильную версию?
Да, если причина относится к адаптивным стилям или мобильному сценарию. После изменения всё равно проверяем десктоп.
Нужен отдельный мобильный поддомен?
Чаще подходит один URL с адаптивной вёрсткой. Отдельная версия требует постоянной синхронизации контента и SEO-настроек.
Почему проблема есть только на одном телефоне?
Причина может зависеть от ширины, браузера, системного масштаба, экранной клавиатуры или поддержки конкретного API.
Как принимается результат?
Проверяем согласованный сценарий на нескольких ширинах, ориентациях и браузерах, а также отсутствие горизонтальной прокрутки.
Первый шаг
Пришлите страницу и снимок с телефона
Укажите модель устройства, браузер и действие, после которого появляется ошибка. Этого достаточно для первого воспроизведения.