Создание мобильного адаптива для 1С-Битрикс под ключ

В head страницы прописывается meta name="viewport" content="width=device-width, initial-scale=1.0" — корректное масштабирование, запрет горизонтального скролла, учёт «чёлки» iPhone (safe-area-inset-*). Для iOS-приложений — apple-mobile-web-app-capable.

Реализуется бургер-меню с выпадающими подпунктами: HTML-разметка nav со всеми пунктами меню, скрытая по умолчанию; при клике на бургер (три полоски) добавляется класс mobile-menu--open, меню выезжает через transform: translateX(0). Подпункты раскрываются аккордеоном через JS (без jQuery — ванильный JS). Поддерживается навигация с клавиатуры (ARIA-атрибуты aria-expanded, aria-controls).

Увеличиваются размеры кликабельных элементов до 44×44 px (по рекомендациям Apple HIG и Google Material Design). Убирается :hover на мобильных (заменяется на :active). Добавляется touch-action: manipulation для кнопок и ссылок — убирается 300 мс задержка нажатия. Реализуются свайпы (горизонтальные для слайдеров, вертикальные для закрытия модалок) через Pointer Events API.

Поля ввода имеют type="tel" для телефонов (числовая клавиатура), type="email" для email, type="number" для числовых полей. Добавляется autocomplete (name, tel, email, postal-code) — браузер автозаполняет из сохранённых данных. Убираются обязательные поля, не критичные для мобильного заказа. Кнопка «Оформить заказ» закрепляется внизу экрана (sticky CTA) для длинных форм.

Используются адаптивные изображения через picture + source + img — для ретина-экранов загружается 2× разрешение. Для фоновых изображений — image-set() в CSS. Отключается background-attachment: fixed на мобильных (тормозит скролл на iOS).

Проверяются mobile-friendly факторы Google Search Console: читаемый размер шрифта (минимум 16px для основного текста), отсутствие горизонтального скролла, корректные отступы между кликабельными элементами (минимум 8px). В robots.txt не блокируются CSS/JS (Google рендерит страницу с этими ресурсами).

При необходимости настраиваются AMP-страницы (Google) или Turbo-страницы (Яндекс) для быстрого отображения в поисковой выдаче. Для Битрикс используется модуль amp из Marketplace — генерирует валидный AMP-HTML из обычных страниц сайта с ограниченным CSS (до 50 КБ) и только разрешёнными AMP-компонентами.

Тестируется в Chrome DevTools Device Mode и на реальных устройствах: iPhone 12/13/14/15, Android-смартфоны (Samsung, Xiaomi, Pixel), планшеты iPad и Android. Проверяется работа на iOS Safari, Android Chrome, встроенных браузерах Telegram и VK. Проверяются сценарии: прокрутка, pinch-to-zoom, ориентация portrait/landscape, safe-area на iPhone X+.