Тестирование адаптивной верстки сайта 1С-Битрикс

Тестирование адаптивной верстки сайта 1С-Битрикс

На сайтах 1С-Битрикс адаптивная вёрстка часто ломается в неочевидных местах: компонент bitrix:catalog.section генерирует таблицу товаров, которая не помещается на экране 375px, всплывающее окно BX.PopupWindow вылезает за viewport на планшете, а шаблон bitrix:sale.basket.basket в мобильной версии теряет кнопку оформления заказа за пределами экрана. Проблема в том, что штатные шаблоны Битрикса проектировались для десктопа и адаптивность добавлялась поверх — с разным качеством.

Тестирование адаптивности — это не «открыл на телефоне и посмотрел». Это системная проверка всех критичных страниц на реальных разрешениях с фиксацией и устранением дефектов.

Что именно тестируем

Перечень контрольных точек зависит от шаблона, но базовый набор breakpoints:

Критичные страницы для e-commerce: главная, каталог (список + детальная), корзина, оформление заказа, личный кабинет, страница поиска. Каждая проверяется на каждом breakpoint.

Инструменты и методика

Chrome DevTools Device Mode — первый проход. Проверяем все breakpoints, фиксируем горизонтальный скролл через document.documentElement.scrollWidth > window.innerWidth в консоли. Это быстро, но не показывает реальных проблем с тач-событиями и производительностью рендеринга.

BrowserStack / реальные устройства — второй проход. DevTools эмулирует viewport, но не эмулирует поведение Safari на iOS. Классические проблемы, которые видны только на реальных устройствах:

• position: fixed в Safari iOS работает иначе при открытой клавиатуре
• 100vh в мобильных браузерах включает адресную строку — элемент уходит за экран
• Touch-события на кнопках Битрикса: BX.bind иногда не срабатывает при tap на iOS

Lighthouse Mobile Audit — проверяем tap target size (минимум 48x48px), font size (минимум 16px для input, иначе iOS зумит), viewport meta tag.

Типичные дефекты в шаблонах Битрикс и их устранение

Горизонтальный скролл. В 80% случаев причина — элемент с фиксированной шириной внутри flex/grid-контейнера. Часто это таблица в bitrix:sale.order.ajax или слайдер в шаблоне баннеров. Решение — overflow-x: hidden на обёртке и рефакторинг таблицы в карточки на мобильных через media query.

Меню-бургер не работает. Штатный bitrix:menu не предоставляет мобильное меню из коробки. Шаблон компонента нужно дорабатывать: добавлять toggle-кнопку, off-canvas панель, обработку touchstart для закрытия по свайпу.

Фильтр каталога. Компонент bitrix:catalog.smart.filter рендерит все свойства в одну колонку. На мобильных фильтр занимает 3-4 экрана до товаров. Решение — свернуть фильтр в выезжающую панель с кнопкой «Фильтры (N)», где N — количество активных фильтров.

Изображения. Штатные компоненты используют CFile::ResizeImageGet() с фиксированными размерами. На мобильных загружаются десктопные изображения 1200px. Нужна интеграция srcset / <picture> в шаблоны компонентов, либо использование webp через модуль perfmon или серверную конвертацию.

Чеклист приёмки

После тестирования и исправлений — финальная проверка по чеклисту:

• Нет горизонтального скролла на всех breakpoints
• Все интерактивные элементы доступны и кликабельны (tap target >= 48px)
• Формы (заказ, авторизация, обратная связь) корректно работают с мобильной клавиатурой
• Изображения не вызывают Layout Shift (CLS < 0.1)
• Шрифт в input не менее 16px (предотвращает auto-zoom на iOS)
• Popup и модальные окна Битрикса (BX.PopupWindow) корректно позиционируются

Тестирование и исправление адаптивности занимает 2-3 дня при условии, что шаблон уже имеет базовую responsive-сетку. Если шаблон десктопный без media queries — это другая задача с другими сроками.