Адаптивность и мобильная версия на Битрикс

Больше половины трафика большинства сайтов приходит с телефонов, и вопрос «делать ли мобильную версию» давно не стоит. Стоит другой: делать адаптивную вёрстку одним шаблоном или отдельную мобильную версию с определением устройства на сервере.

На 1С-Битрикс этот выбор имеет техническое последствие, о котором обычно узнают поздно: серверное определение устройства конфликтует с кешированием. Разберём оба подхода, их совместимость с кешем и практические приёмы адаптива — от меню до изображений.

Два подхода

Для абсолютного большинства сайтов правильный ответ — адаптивная вёрстка. Отдельная мобильная версия оправдана только там, где мобильный сценарий принципиально отличается от десктопного, а не просто «то же самое, но уже».

Почему определение устройства ломается о кеш

Соблазн выглядит так: определить на сервере, что зашли с телефона, и отдать другой HTML. Проблема в том, что Битрикс кеширует результат.

Что происходит на практике:

1. Первым на страницу заходит пользователь с десктопа.
2. Компонент отрабатывает и кладёт десктопную разметку в кеш.
3. Следом заходит пользователь с телефона.
4. Компонент отдаёт содержимое из кеша — десктопное.

То же самое, только заметнее, происходит с композитным кешем: закешированная страница раздаётся всем подряд. Как устроен композит, разобрано в статье Композитный сайт Битрикс.

Если серверное определение устройства всё-таки нужно, тип устройства обязан входить в ключ кеширования компонента — тогда для мобильных и десктопов будут отдельные копии кеша. Это удваивает объём кеша и усложняет отладку, поэтому решение принимают осознанно.

Что нужно для адаптива

Метатег viewport

Без него мобильный браузер отрисует страницу как десктопную и уменьшит масштаб:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ставится в header.php шаблона. Это первое, что стоит проверить, если «адаптив не работает» — на удивление часто причина именно в этом.

Контрольные точки

Разумный набор брейкпоинтов, покрывающий реальные устройства:

/* мобильные — базовые стили без медиазапроса */

@media (min-width: 576px)  { /* большие телефоны */ }
@media (min-width: 768px)  { /* планшеты */ }
@media (min-width: 992px)  { /* небольшие ноутбуки */ }
@media (min-width: 1200px) { /* десктоп */ }

Подход «сначала мобильные» удобнее: базовые стили описывают простой одноколоночный макет, а медиазапросы добавляют сложность для больших экранов. В обратную сторону приходится много переопределять.

Меню на мобильных

Горизонтальное меню на телефон не помещается — его превращают в выпадающее. Важный момент: не выводите меню дважды.

Частая ошибка — вставить компонент bitrix:menu два раза: один для десктопа, второй для мобильных, скрывая ненужный через CSS. Это удваивает разметку, ломает доступность и создаёт дубли ссылок в коде страницы.

Правильный путь — один вызов компонента и разное оформление через CSS:

<?$APPLICATION->IncludeComponent(
    'bitrix:menu',
    'main',
    [
        'ROOT_MENU_TYPE'  => 'top',
        'MENU_CACHE_TYPE' => 'A',
        'MAX_LEVEL'       => 2,
    ]
)?>

/* мобильные: скрытое меню, открывается по кнопке */
.menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: 80%;
    transform: translateX(100%);
    transition: transform .25s;
}
.menu.is-open { transform: translateX(0); }

/* десктоп: обычная горизонтальная строка */
@media (min-width: 992px) {
    .menu {
        position: static;
        width: auto;
        transform: none;
        display: flex;
        gap: 24px;
    }
}

Изображения

Самая частая причина медленной загрузки на мобильных — картинки в десктопном разрешении. Телефону с шириной экрана 400 пикселей отдаётся изображение шириной 2000.

В Битрикс размеры генерируются на лету методом CFile::ResizeImageGet — он подробно разобран в отдельной статье CFile::ResizeImageGet в Битрикс.

Готовим два размера и отдаём браузеру выбор:

<?php
$small = CFile::ResizeImageGet(
    $item['PREVIEW_PICTURE'],
    ['width' => 480, 'height' => 480],
    BX_RESIZE_IMAGE_PROPORTIONAL
);

$large = CFile::ResizeImageGet(
    $item['PREVIEW_PICTURE'],
    ['width' => 1200, 'height' => 1200],
    BX_RESIZE_IMAGE_PROPORTIONAL
);
?>

<img
    src="<?= $large['src'] ?>"
    srcset="<?= $small['src'] ?> 480w, <?= $large['src'] ?> 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
    loading="lazy"
    alt="<?= htmlspecialcharsbx($item['NAME']) ?>"
>

Атрибут loading="lazy" откладывает загрузку картинок за пределами экрана — на длинных страницах каталога эффект заметный.

Таблицы и широкие блоки

Таблицы — главный источник горизонтальной прокрутки всей страницы. Решение — дать прокрутку самой таблице, а не документу:

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

<div class="table-wrap">
    <table>...</table>
</div>

То же касается блоков кода, широких схем и галерей. Правило простое: страница не должна прокручиваться вбок никогда.

Размеры элементов управления

Что регулярно ломает мобильный сайт, хотя вёрстка формально адаптивная:

• Мелкие кнопки и ссылки. Минимальная область нажатия — около 44 пикселей по каждой стороне. Ссылки в тексте, стоящие вплотную, промахиваются пальцем.
• Мелкий шрифт в полях ввода. При размере меньше 16 пикселей мобильный браузер зумит страницу при фокусе на поле — и пользователь остаётся с увеличенным макетом.
• Виджеты поверх кнопок. Плавающая кнопка чата часто перекрывает «Купить» или «Отправить». Проверяйте на реальном телефоне.
• Фиксированная шапка на пол-экрана. На телефоне высота экрана ограничена, и залипающая шапка съедает содержимое.

Проверка

1. Откройте сайт на реальном телефоне, а не только в эмуляторе браузера.
2. Проверьте, что страница не прокручивается по горизонтали ни на одной странице.
3. Пройдите ключевой сценарий целиком: каталог, карточка, корзина, оформление.
4. Заполните форму — поля не должны вызывать зум при фокусе.
5. Проверьте вес страницы и размеры загружаемых изображений.
6. Прогоните страницы через PageSpeed в мобильном режиме.

Приёмы ускорения, которые особенно сильно влияют именно на мобильные показатели, собраны в статье Как ускорить сайт на Битрикс для PageSpeed Insights.

Итог

Для сайта на 1С-Битрикс адаптивная вёрстка почти всегда предпочтительнее отдельной мобильной версии: один шаблон, один URL и полная совместимость с кешированием. Серверное определение устройства требует включать тип устройства в ключ кеша, иначе посетители будут получать чужую версию страницы.

Технический минимум адаптива — метатег viewport, подход «сначала мобильные», один вызов меню с разным оформлением через CSS, изображения в нескольких размерах через srcset и прокрутка внутри широких блоков вместо прокрутки всей страницы.

Похожие статьи

Сборка ассетов Vite и Webpack в проекте на БитриксСпрайты и иконки в шаблоне БитриксСвой шаблон для конкретного раздела сайта в БитриксВключаемые области в Битрикс