Отключение на мобильных устройствах

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

Определение мобильного устройства

Существует несколько подходов для определения мобильного устройства в Jav * aScript:

1. Использование navigator.userAgent:

const isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);

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

2. Проверка ширины экрана:

const isMobile = window.innerWidth <= 768;

Подходит для адаптивного дизайна. Значение 768px соответствует стандартной границе между мобильными устройствами и планшетами/десктопами. Этот метод более ориентирован на размеры интерфейса, чем на конкретное устройство.

3. Комбинированный метод:

const isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent) || window.innerWidth <= 768;

Объединение детектора по userAgent и ширине экрана обеспечивает более надёжное определение мобильных устройств.

Условное подключение и инициализация Driver.js

После определения мобильного устройства следует контролировать создание экземпляра Driver.js:

if (!isMobile) {
    const driver = new Driver({
        animate: true,
        opacity: 0.75,
        padding: 10,
        allowClose: true,
        overlayClickNext: false
    });

    driver.defineSteps([
        {
            element: '#step1',
            popover: {
                title: 'Первый шаг',
                description: 'Описание первого шага',
                position: 'bottom'
            }
        },
        {
            element: '#step2',
            popover: {
                title: 'Второй шаг',
                description: 'Описание второго шага',
                position: 'top'
            }
        }
    ]);

    driver.start();
}

В этом примере Driver.js не инициализируется на мобильных устройствах. Всё управление шагами и визуальными параметрами остаётся доступным для десктопной версии.

Использование CSS для мобильных экранов

Дополнительно можно предотвратить отображение оверлея через CSS:

@media (max-width: 768px) {
    .driver-highlighted-element,
    .driver-popover,
    .driver-overlay {
        display: none !important;
    }
}

Это гарантирует, что даже при случайной инициализации на мобильном устройстве визуальные элементы Driver.js не будут мешать интерфейсу.

Динамическое отключение после инициализации

В некоторых случаях требуется отключить уже запущенный Driver.js при изменении размера окна:

let driver;

function initDriver() {
    if (!isMobile) {
        driver = new Driver();
        driver.defineSteps(steps);
        driver.start();
    }
}

window.addEventListener('resize', () => {
    if (window.innerWidth <= 768 && driver) {
        driver.reset(true);
    }
});

Метод reset(true) полностью сбрасывает текущий пошаговый процесс, скрывает подсказки и очищает оверлей. Это предотвращает некорректное отображение при повороте экрана или изменении размеров окна браузера на планшетах.

Практические рекомендации

  • Выбор метода определения устройства: Использовать комбинированный подход для большей надёжности.
  • Инициализация только при необходимости: Создание экземпляра Driver.js и определение шагов только для десктопа уменьшает нагрузку.
  • Обработка ресайза: Реагирование на изменение размеров окна предотвращает баги с мобильными интерфейсами.
  • CSS-страховка: Скрытие всех подсказок через медиазапросы предотвращает визуальные конфликты.

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

Оглавление