Компонент bitrix:catalog.section на мобільних виїжджає за правий край екрану, фільтр bitrix:catalog.smart.filter займає три екрани до товарів, а спливаюче вікно BX.PopupWindow на планшеті позиціонується за межами viewport. Ми стикаємося з цим щодня в проектах клієнтів і знаємо, як виправити кожну проблему. У 60% звернень за адаптацією сайтів Бітрікс проблема криється саме в шаблонах компонентів, які не враховують мобільні роздільності. Після нашої доопрацювання конверсія з мобільних пристроїв зростає в середньому на 15-20%, а показник відмов падає на 25%.
Адаптивне тестування — це не «відкрив на телефоні і подивився». Це системна перевірка всіх критичних сторінок на реальних роздільностях з фіксацією та усуненням дефектів. Ми працюємо з Бітрікс багато років і реалізували понад 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-подіями та позиціонуванням, які емулятор не покаже. Довірте тестування професіоналам з багаторічним досвідом в 1С-Бітрікс. Замовте аудит адаптивності — і ми зробимо ваш сайт зручним на будь-якому пристрої.