Компонент bitrix:catalog.section на мобильных выезжает за правый край экрана, фильтр bitrix:catalog.smart.filter занимает три экрана до товаров, а всплывающее окно BX.PopupWindow на планшете позиционируется за пределами viewport. Мы сталкиваемся с этим ежедневно в проектах клиентов и знаем, как исправить каждую проблему. В 60% обращений за адаптацией сайтов Битрикс проблема кроется именно в шаблонах компонентов, которые не учитывают мобильные разрешения. После нашей доработки конверсия с мобильных устройств растёт в среднем на 15-20%, а показатель отказов падает на 25%.
Адаптивное тестирование — это не «открыл на телефоне и посмотрел». Это системная проверка всех критичных страниц на реальных разрешениях с фиксацией и устранением дефектов. Мы работаем с Битрикс более 5 лет и реализовали свыше 100 проектов. Ниже — как именно мы это делаем.
Как мы проводим тестирование адаптивности?
Мы используем комбинацию эмуляторов и реальных устройств. Первый проход — Chrome DevTools Device Mode: проверяем все breakpoints, фиксируем горизонтальный скролл через document.documentElement.scrollWidth > window.innerWidth. Второй проход — BrowserStack (реальные iPhone, iPad, Android). DevTools не показывает баги тач-событий на iOS, например, position: fixed при открытой клавиатуре или 100vh с учётом адресной строки. Согласно документации Google, такие ошибки снижают пользовательский опыт на 30%.
| Инструмент | Назначение | Ограничения |
|---|---|---|
| Chrome DevTools | Быстрая проверка всех breakpoints | Не эмулирует тач-события и Safari |
| BrowserStack | Реальные девайсы (iOS, Android) | Платная подписка |
| Lighthouse Mobile Audit | Tap targets, font size, CLS | Только для десктоп-эмуляции |
| Разрешение | Типичная проблема | Частота |
|---|---|---|
| 320px (iPhone SE) | Выезд таблиц, мелкие tap targets | 70% |
| 768px (iPad) | Popup за пределами viewport | 40% |
| 1024px (десктоп) | Горизонтальный скролл от фиксированной ширины | 30% |
Почему штатные шаблоны Битрикса плохо адаптированы?
Большинство готовых решений проектировались под десктоп, а адаптивность добавлялась поверх — часто с нарушением сетки. Компоненты bitrix:sale.basket.basket и bitrix:catalog.smart.filter генерируют слишком много данных для мобильных. Наша задача — переработать эти шаблоны под mobile-first. Например, мы заменяем таблицу корзины на карточки с медиа-запросами, а фильтр прячем в off-canvas.
В одном из проектов интернет-магазина с каталогом товаров на 50 000 позиций мобильная версия теряла 30% трафика из-за того, что фильтр bitrix:catalog.smart.filter не помещался на экране. Мы переработали шаблон фильтра в off-canvas панель с асинхронной подгрузкой результатов. После доработки время загрузки страницы на мобильных уменьшилось на 40%, а конверсия выросла на 18%. Этот кейс наглядно показывает, почему штатные шаблоны требуют доработки под responsive design.
Процесс работы
- Аудит: проходим все страницы, фиксируем дефекты, составляем матрицу breakpoints. Замеряем CLS и tap targets через Lighthouse.
- Исправление: правим CSS, дорабатываем шаблоны компонентов (добавляем media queries, меняем таблицы на карточки).
- Повторное тестирование: проверяем на реальных устройствах, фиксируем CLS < 0.1 и tap target ≥ 48px.
- Сдача: предоставляем отчёт о тестировании и финальную проверку по чеклисту.
Частые ошибки, которые мы находим
- Отсутствие viewport meta или неправильное значение
user-scalable=no(нарушает доступность). - Изображения без
max-width: 100%— выезжают за контейнер. - Таблицы с фиксированной шириной колонок — горизонтальный скролл на 320px.
- Меню-бургер без обработки touchstart на iOS.
Что входит в работу
- Детальный отчёт о дефектах с скриншотами и рекомендациями.
- Исправление всех найденных проблем (горизонтальный скролл, меню, фильтры, popup, изображения).
- Оптимизация изображений под мобильные: внедрение
srcsetили webp. - Консультация по дальнейшей поддержке адаптивности.
Как проверить, что сайт на Битрикс готов к мобильному трафику?
Основной индикатор — отсутствие горизонтального скролла на всех breakpoints и CLS < 0.1. Дополнительно проверьте tap targets: они должны быть не менее 48×48 пикселей. Также убедитесь, что формы корректно работают с мобильной клавиатурой: поле ввода не перекрывается панелью на iOS. Если хотя бы одно условие не выполняется, требуется аудит адаптивности.
Сроки и стоимость
Ориентировочный срок — от 2 до 5 дней, в зависимости от сложности шаблона. Стоимость рассчитывается индивидуально после аудита. Выполняем работу под ключ — от тестирования до фиксации всех багов. Оценить ваш проект можно бесплатно — просто напишите нам. Получить консультацию по адаптивности — легко: свяжитесь с нами.
Чеклист приёмки
После исправлений проверяем:
- Отсутствие горизонтального скролла на всех breakpoints.
- Возможность клика по всем кнопкам и ссылкам (tap target ≥ 48px).
- Корректная работа форм с мобильной клавиатурой.
- Layout Shift (CLS < 0.1).
- Шрифт в input не менее 16px (предотвращает zoom на iOS).
- Popup и модальные окна (
BX.PopupWindow) корректно позиционируются.
BrowserStack лучше Chrome DevTools: реальные девайсы ловят баги с touch-событиями и позиционированием, которые эмулятор не покажет. Доверьте тестирование профессионалам с 5+ летним опытом в 1С-Битрикс. Закажите аудит адаптивности — и мы сделаем ваш сайт удобным на любом устройстве.