Адаптация к размеру экрана

Intro.js — это библиотека для создания интерактивных пошаговых инструкций по интерфейсу. Одной из важных задач при использовании интро-туров является корректная работа на разных устройствах и размерах экранов. В этом разделе рассматриваются методы адаптации, настройки и тонкости работы с динамическими размерами.

Автоматическое позиционирование подсказок

По умолчанию Intro.js вычисляет позицию подсказки относительно целевого элемента. Для адаптации к разным экранам используется параметр position, который может принимать значения:

  • top
  • left
  • right
  • bottom
  • auto — автоматический выбор оптимального положения, исходя из видимой области окна.
introJs().setOptions({
  steps: [
    {
      element: '#menu',
      intro: 'Это главное меню',
      position: 'auto'
    }
  ]
}).start();

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

Динамическая подстройка размера подсказок

Подсказки Intro.js имеют фиксированную ширину по умолчанию, что может создавать проблемы на маленьких экранах. Для контроля ширины можно использовать CSS:

.introjs-tooltip {
  max-width: 90vw; /* максимум 90% ширины экрана */
  min-width: 200px; /* минимальная ширина */
  word-wrap: break-word; /* перенос слов для маленьких экранов */
}

Такой подход обеспечивает читаемость текста на смартфонах и планшетах, предотвращает выход подсказки за пределы видимой области.

Обработка изменения размера окна

Для обеспечения адаптивности необходимо отслеживать событие resize и пересчитывать позиции подсказок:

window.addEventListener('resize', function() {
  introJs().refresh(); // пересчитывает позиции всех активных шагов
});

Метод refresh() позволяет Intro.js корректно позиционировать подсказки при изменении ширины или высоты окна.

Адаптивные размеры и медиа-запросы

В CSS можно использовать медиа-запросы для изменения стилей подсказок в зависимости от ширины экрана:

@media (max-width: 768px) {
  .introjs-tooltip {
    font-size: 14px;
    padding: 10px;
  }
  .introjs-arrow {
    display: none; /* скрываем стрелки на маленьких экранах */
  }
}

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

Настройка адаптивной анимации

Intro.js поддерживает анимацию появления подсказок. На маленьких экранах анимации могут создавать задержку, мешающую быстрому взаимодействию. Анимацию можно отключать или изменять через CSS:

.introjs-fadein {
  transition: none !important; /* отключение анимации */
}

Для адаптивного поведения можно использовать условные классы и включать/отключать анимацию в зависимости от размера экрана.

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

const intro = introJs();
intro.setOptions({
  steps: [
    {
      element: '#header',
      intro: 'Главная панель навигации',
      position: 'auto'
    },
    {
      element: '#content',
      intro: 'Основное содержимое страницы',
      position: 'auto'
    },
    {
      element: '#footer',
      intro: 'Подвал с контактной информацией',
      position: 'bottom'
    }
  ]
});

// Пересчет позиций при изменении размера
window.addEventListener('resize', () => intro.refresh());

intro.start();

Этот подход гарантирует корректное отображение подсказок на любых устройствах и позволяет использовать преимущества автоматического позиционирования и CSS адаптации.

Работа с масштабированием и мобильными браузерами

На мобильных устройствах часто возникает масштабирование страницы. Intro.js учитывает viewport при расчете позиции, однако при нестандартных масштабах полезно вручную корректировать положение:

intro.onbeforechange(function(targetElement) {
  const viewportWidth = window.innerWidth;
  if (viewportWidth < 500) {
    this._introItems[this._currentStep].position = 'bottom';
  }
});

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

Поддержка ориентации экрана

При повороте устройства важно пересчитывать позиции:

window.addEventListener('orientationchange', () => {
  introJs().refresh();
});

Комбинация событий resize и orientationchange обеспечивает полную адаптивность интро-тура, сохраняя комфортное взаимодействие с интерфейсом.

Выводы по адаптации

  • Использовать position: auto для автоматического выбора позиции подсказки.
  • Контролировать ширину и перенос текста через CSS (max-width, word-wrap).
  • Обрабатывать события resize и orientationchange для динамической корректировки.
  • Применять медиа-запросы для изменения стиля подсказок на разных экранах.
  • При необходимости корректировать анимацию и поведение на мобильных устройствах.

Эти методы обеспечивают полноценную адаптивность интро-туров Intro.js, позволяя сохранять читаемость, удобство и точность позиционирования на любых устройствах.

Оглавление