Тестування адаптивної верстки сайту 1С-Бітрікс
На сайтах 1С-Бітрікса адаптивна верстка часто ломається у неочевидних місцях: компонент bitrix:catalog.section генерує таблицю товарів, яка не помішається на екрані 375px, спливаюче вікно BX.PopupWindow вилізає за viewport на планшеті, а шаблон bitrix:sale.basket.basket у мобільній версії втрачає кнопку оформлення замовлення за межами екрану. Проблема в тому, що штатні шаблони Бітрікса проектувалися для десктопу, а адаптивність додавалася зверху — з різною якістю.
Тестування адаптивності — це не «відкрив на телефоні та подивився». Це системна перевірка всіх критичних сторінок на реальних розширеннях з фіксацією та усуненням дефектів.
Що саме тестуємо
Перелік контрольних точок залежить від шаблону, але базовий набір breakpoints:
| Breakpoint | Пристрій | Типові проблеми |
|---|---|---|
| 320-375px | Смартфони (SE, старі Android) | Переповнення контейнерів, обрізка тексту, горизонтальний скролл |
| 376-428px | Сучасні смартфони | Некоректне розташування фільтрів каталогу |
| 429-768px | Планшети (портрет) | Сітка товарів 2 колонки замість 3, проблеми з меню |
| 769-1024px | Планшети (ландшафт) | Боковий фільтр перекриває контент |
| 1025-1280px | Ноутбуки | Дрібні дефекти відступів |
Критичні сторінки для e-commerce: головна, каталог (список + детальна), корзина, оформлення замовлення, особистий кабінет, сторінка пошуку. Кожна перевіряється на кожному breakpoint.
Інструменти та методика
Chrome DevTools Device Mode — перший прохід. Перевіряємо всі breakpoints, фіксуємо горизонтальний скролл через document.documentElement.scrollWidth > window.innerWidth у консолі. Це швидко, але не показує реальних проблем з тач-подіями та продуктивністю рендеринга.
BrowserStack / реальні пристрої — другий прохід. DevTools емулює viewport, але не емулює поведінку Safari на iOS. Класичні проблеми, видимі тільки на реальних пристроях:
-
position: fixedу Safari iOS працює інакше при відкритій клавіатурі -
100vhу мобільних браузерах включає адресну строку — елемент уходит за екран - Touch-подiї на кнопках Бітрікса:
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 — це інша задача з іншими строками.