Адаптивный дизайн для мобильных устройств

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

Ключевые моменты, влияющие на адаптивность:

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

Настройка мобильной версии пошагового интерфейса

Intro.js предоставляет объект конфигурации options, который позволяет управлять поведением подсказок и шагов. Для мобильных устройств важны следующие параметры:

introJs().setOptions({
    steps: [
        {
            element: '#menu',
            intro: 'Основное меню приложения',
            position: 'bottom'
        },
        {
            element: '#profile',
            intro: 'Раздел профиля',
            position: 'top'
        }
    ],
    tooltipClass: 'customTooltip',
    showStepNumbers: false,
    exitOnOverlayClick: true,
    scrollToElement: true,
    hidePrev: true,
    hideNext: false
}).start();

Объяснение ключевых параметров:

  • position – положение подсказки относительно целевого элемента (top, bottom, left, right, auto). На мобильных устройствах рекомендуется использовать auto или динамически менять позицию в зависимости от доступного пространства.
  • tooltipClass – позволяет задавать кастомные стили подсказок. Для мобильных можно увеличить размеры шрифта, ширину подсказки и отступы.
  • scrollToElement – обеспечивает прокрутку страницы к целевому элементу, что особенно важно на небольших экранах.
  • exitOnOverlayClick – улучшает UX на мобильных устройствах, позволяя пользователю закрыть подсказку простым касанием.

Медиа-запросы для кастомизации подсказок

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

.customTooltip {
    max-width: 300px;
    font-size: 16px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .customTooltip {
        max-width: 90%;
        font-size: 14px;
        padding: 10px;
    }
}

Пояснения:

  • max-width в процентах позволяет тултипу адаптироваться к ширине экрана.
  • font-size и padding уменьшаются на мобильных устройствах для улучшения читаемости и визуального восприятия.

Управление позиционированием на маленьких экранах

Intro.js позволяет задавать динамическое позиционирование через функцию position(), которая может определять положение подсказки в зависимости от размеров экрана и видимости элемента:

introJs().onbeforechange(function(targetElement) {
    if (window.innerWidth < 768) {
        this._options.steps.forEach(step => {
            if(step.element === targetElement) {
                step.position = 'auto';
            }
        });
    }
});

Использование auto позволяет библиотеке автоматически выбирать наилучшее положение подсказки и избегать выхода за пределы экрана.

Масштабирование и прокрутка контента

На мобильных устройствах элементы интерфейса могут быть частично скрыты. Для корректного отображения шагов:

  • Активировать scrollToElement: true
  • Проверять видимость элемента через JavaScript перед показом шага:
introJs().onbeforechange(function(targetElement) {
    if (!isElementInViewport(targetElement)) {
        targetElement.scrollIntoView({beh * avior: 'smooth', block: 'center'});
    }
});

function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return rect.top >= 0 && rect.bottom <= window.innerHeight;
}

Такой подход предотвращает перекрытие подсказками других важных элементов и обеспечивает удобное взаимодействие на мобильных экранах.

Кастомизация навигационных кнопок

На мобильных устройствах кнопки Next, Back и Done должны быть достаточно крупными для касания пальцем. Настройки через CSS:

.customTooltip .introjs-button {
    padding: 12px 20px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .customTooltip .introjs-button {
        padding: 14px 24px;
        font-size: 16px;
    }
}

Также можно скрывать или показывать кнопки в зависимости от шага:

introJs().onafterchange(function(targetElement) {
    const nextButton = document.querySelector('.introjs-nextbutton');
    if (window.innerWidth < 768 && this._currentStep === 0) {
        nextButton.style.display = 'block';
    }
});

Поддержка сенсорного взаимодействия

Для мобильных устройств важно, чтобы подсказки реагировали на свайпы и касания. Intro.js поддерживает касание через exitOnOverlayClick, но можно добавить кастомное поведение:

document.querySelector('.introjs-overlay').addEventListener('touchstart', function() {
    introJs().exit();
});

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

Выводы по адаптивности

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

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

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

Оглавление