Оптимизация для маленьких экранов

Shepherd.js позволяет создавать гибкие пошаговые руководства, которые корректно отображаются на разных устройствах, включая мобильные. Основной инструмент для оптимизации под маленькие экраны — использование адаптивных настроек в конфигурации шагов. Каждый шаг (step) поддерживает объект attachTo, который задаёт элемент привязки и позицию. Для мобильных устройств позицию часто стоит менять на top или bottom, чтобы тултип не выходил за границы экрана.

tour.addStep({
  id: 'example-step',
  text: 'Пример шага для мобильного экрана',
  attachTo: {
    element: '.target-element',
    on: window.innerWidth < 768 ? 'bottom' : 'right'
  }
});

Поддержка медиа-запросов в JS позволяет динамически менять позиции и размеры подсказок без изменения логики шагов. Это важно, если интерфейс приложения сильно меняется на маленьких экранах.

Настройка размера и расположения подсказок

Shepherd.js использует всплывающие элементы (tooltip) с возможностью задавать ширину, высоту, отступы и встроенные стили через объект classes и style. Для маленьких экранов рекомендуется:

  • Ограничивать максимальную ширину (max-width) 90–95% от ширины окна;
  • Использовать position: fixed для предотвращения сдвига при скролле;
  • Подгонять размеры стрелок (arrow) под меньшие размеры.
tour.addStep({
  id: 'mobile-size-step',
  text: 'Тултип с адаптивной шириной',
  classes: 'shepherd-theme-arrows shepherd-transparent-text',
  style: {
    maxWidth: window.innerWidth < 768 ? '90%' : '400px'
  }
});

Скроллинг и видимость элементов

На маленьких экранах часто возникает ситуация, когда целевой элемент находится вне видимой области. Shepherd.js имеет встроенный параметр scrollTo:

  • scrollTo: true — автоматически прокручивает страницу к элементу;
  • scrollTo: {beh * avior: 'smooth', block: 'center'} — позволяет задать плавную прокрутку и положение элемента на экране.
tour.addStep({
  id: 'scroll-step',
  text: 'Шаг с прокруткой к элементу',
  attachTo: { element: '#menu', on: 'top' },
  scrollTo: { beh * avior: 'smooth', block: 'center' }
});

Использование scrollTo критично для мобильных устройств, чтобы пользователь видел подсказку целиком и не сталкивался с обрезанным текстом.

Минимизация текста и адаптивные кнопки

На маленьких экранах большое значение имеет экономия пространства. В Shepherd.js можно:

  • Сокращать текст шага или разбивать его на несколько маленьких шагов;
  • Использовать краткие кнопки навигации, задавая объект buttons с text и action:
buttons: [
  { text: 'Далее', action: tour.next },
  { text: 'Назад', action: tour.back }
]

Для мобильных устройств рекомендуется уменьшать число кнопок и оставлять только ключевые действия (Далее, Закрыть), чтобы тултип не занимал слишком много места.

Позиционирование при динамических изменениях интерфейса

Интерфейсы на мобильных устройствах часто динамически меняют размеры элементов (например, при появлении клавиатуры). Shepherd.js позволяет обновлять позицию тултипа через метод updateStepOptions:

tour.currentStep.updateStepOptions({
  attachTo: { element: '.target-element', on: 'bottom' }
});

Этот подход гарантирует, что подсказка не окажется за пределами видимой области и корректно отобразится даже после изменения DOM.

Настройка поведения тултипов для маленьких экранов

Для оптимальной работы на мобильных устройствах важно использовать следующие параметры:

  • useModalOverlay: true — затемнение фона помогает пользователю сосредоточиться на подсказке и предотвращает случайные клики;
  • canClickTarget: false — отключает взаимодействие с целевым элементом до завершения шага;
  • popperOptions — позволяет вручную задавать смещение (offset) тултипа для небольших экранов:
popperOptions: {
  modifiers: [
    { name: 'offset', options: { offset: [0, 10] } },
    { name: 'preventOverflow', options: { padding: 8 } }
  ]
}

Эти настройки помогают корректно отображать тултипы в ограниченном пространстве, не перекрывая элементы интерфейса.

Использование событий для мобильной оптимизации

Shepherd.js поддерживает события show, hide, complete, которые можно использовать для адаптивного поведения:

tour.on('show', (event) => {
  if (window.innerWidth < 768) {
    event.step.updateStepOptions({
      classes: 'shepherd-mobile-step'
    });
  }
});

Это позволяет динамически менять внешний вид и позицию шага при изменении размера экрана или ориентации устройства.

Итоговые рекомендации

  • Использовать адаптивные позиции (top, bottom) и динамическое обновление attachTo;
  • Ограничивать размеры тултипов через maxWidth и кастомные классы;
  • Активно использовать scrollTo для видимости элементов на маленьких экранах;
  • Сокращать текст и кнопки, оставляя только ключевые действия;
  • Обрабатывать события для динамического изменения интерфейса.

Эти методы позволяют создавать пошаговые руководства в Shepherd.js, которые остаются удобными и читабельными на любых мобильных устройствах.

Оглавление