Перейти к содержимому
BXWiki

Мобильная версия - адаптив, отдельный шаблон, кэш по устройству

Делаем сайт удобным на телефоне: выбор между адаптивом и отдельным шаблоном, определение устройства, кэш по типу устройства и проверка результата.

Что нужно знать заранее

Адаптивная вёрстка обходится дешевле и не двоит контент проекта. Один набор страниц выглядит по-разному на разных экранах, а поисковые системы видят один адрес с одним содержимым.

Отдельный шаблон нужен там, где мобильный сценарий заметно отличается от настольного варианта. Каталог с фильтром на телефоне часто устроен иначе, и втискивать это в общую вёрстку выходит дороже.

Определение устройства по строке браузера ненадёжно по своей природе. Новые модели и режимы приходят каждый месяц, поэтому вёрстка обязана оставаться работоспособной при неверном определении.

Шаги

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

Решение

Проверяем ширину и прокрутку блоков:

Окно терминала
curl -s https://example.com/catalog/ | grep -oE 'width="[0-9]{4,}"' | head
# жёсткие ширины в разметке - главная причина горизонтальной прокрутки на телефоне

Горизонтальная прокрутка на телефоне почти всегда объясняется жёсткой шириной в разметке или в стилях. Ищут её по конкретным блокам вёрстки, а не переписывают страницу целиком.

Определяем тип устройства на сервере:

$isMobile = (bool)preg_match('#(iphone|ipad|android|mobile)#i', $_SERVER['HTTP_USER_AGENT'] ?? '');
printf("мобильное устройство: %s\n", $isMobile ? 'да' : 'нет');
// определение по строке браузера приблизительное: вёрстка должна пережить ошибку

Показываем мобильный шаблон правилом:

AddEventHandler('main', 'OnBeforeProlog', static function () {
    global $APPLICATION;
    if (isMobileDevice()) { $APPLICATION->SetTemplate('mobile'); }   // до вывода страницы
});

Смена шаблона на событии до пролога работает на всех страницах сайта сразу. Тот же приём применяют для версии печати и для страниц партнёрской программы, и он давно проверен временем.

Разводим кэш по типу устройства:

$APPLICATION->IncludeComponent('bitrix:catalog.section', '', $params, false, [
    'CACHE_ADDITIONAL' => ['device' => isMobileDevice() ? 'mobile' : 'desktop'],
]);
// без этого первый посетитель определяет вид страницы для всех остальных

Кэш обязан знать про устройство, иначе он смешивает две разные страницы. Особенно это заметно с кэшем готовых страниц, где первый заход определяет вид витрины для всех последующих.

Проверяем, что мобильная версия отдаётся:

Окно терминала
curl -s -A 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)' https://example.com/ \
  | grep -oE 'templates/[a-z_]+' | head -1
# так видно, какой шаблон сайта отдаётся телефону на самом деле

Типичные проблемы

На телефоне появляется горизонтальная прокрутка.

В разметке или стилях остались жёсткие ширины блоков и таблиц. Ширины делают относительными, а таблицы и код прокручивают внутри собственного блока.

Часть посетителей видит чужую версию сайта.

Кэш страницы не учитывает тип устройства и потому отдаётся всем одинаковым. Тип устройства добавляют в ключ кэша компонента и всей страницы.

Мобильный шаблон включается не на всех страницах.

Смена шаблона стоит на отдельных страницах вместо общего события до пролога сайта. Правило применяют один раз для всего сайта.

После обновления телефона сайт открылся в настольной версии.

Определение устройства опирается на устаревший список строк браузера. Список поддерживают либо переходят на адаптивную вёрстку.

Поисковая система показывает две версии одной страницы.

Мобильная версия живёт на отдельном адресе без указания на основную страницу. Для отдельных адресов задают канонический адрес основной версии.

Частые вопросы

Что выбрать: адаптив или отдельный шаблон?

Адаптив покрывает большинство сайтов и дешевле в поддержке. Отдельный шаблон берут, когда мобильный сценарий заметно отличается от настольного.

Нужен ли мобильный поддомен?

Сейчас почти никогда: он двоит адреса и усложняет продвижение. Отдельный шаблон на том же адресе решает ту же задачу без двойных страниц.

Как проверять мобильную вёрстку?

На реальных телефонах и через инструменты разработчика в браузере. Эмуляция ловит не всё: шрифты, прокрутка и клавиатура ведут себя иначе.

Влияет ли мобильная версия на скорость?

Да, и заметно: телефоны медленнее и хуже держат тяжёлые скрипты. Картинки и скрипты на мобильной версии режут в первую очередь.

Что делать с всплывающими окнами на телефоне?

Показывать их реже и делать закрытие крупным и очевидным. Окно на весь экран без видимой кнопки закрытия - причина ухода с сайта.

Смежное

Первоисточник