Поведение на мобильных экранах

Featherlight — лёгкая библиотека для создания модальных окон в JavaScript, которая автоматически адаптируется под разные размеры экранов. При разработке интерфейсов важно учитывать особенности мобильных устройств: ограниченный экран, сенсорное управление и возможные проблемы с производительностью. Featherlight предоставляет ряд механизмов, упрощающих работу с модальными окнами на мобильных устройствах.

Адаптивная ширина и высота

По умолчанию Featherlight устанавливает размеры модального окна автоматически, исходя из содержимого. На мобильных экранах это может приводить к слишком большим блокам, которые выходят за пределы видимой области. Для решения этой проблемы используется параметр maxWidth и maxHeight, а также возможность указания ширины и высоты в процентах от экрана:

$.featherlight('<p>Пример контента</p>', {
    maxWidth: '90%',
    maxHeight: '80%'
});

Особенности применения:

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

Скроллинг внутри модального окна

На маленьких экранах контент может не помещаться полностью, что требует внутреннего скроллинга. Featherlight поддерживает скроллинг через CSS:

.featherlight-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
}

Рекомендации:

  • -webkit-overflow-scrolling: touch обеспечивает естественный инерционный скролл на устройствах Apple.
  • Не рекомендуется полностью отключать скроллинг окна браузера, так как это может ухудшить восприятие контента на небольших экранах.

Сенсорные события и закрытие

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

$('.featherlight').on('touchstart', function(e) {
    startY = e.originalEvent.touches[0].clientY;
});

$('.featherlight').on('touchend', function(e) {
    endY = e.originalEvent.changedTouches[0].clientY;
    if (endY - startY > 50) { // свайп вниз
        $.featherlight.close();
    }
});

Особенности работы:

  • Свайп вниз чаще всего воспринимается как жест закрытия окна.
  • Нужно учитывать возможность конфликта со скроллингом внутреннего контента.

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

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

$.featherlight('<img src="image.jpg" style="max-width: 100%; height: auto;">');

Важные моменты:

  • Установка max-width: 100% предотвращает выход изображения за границы окна.
  • Для видео рекомендуется использовать контейнер с width: 100% и height: auto, чтобы сохранять пропорции.

Настройка закрытия при смене ориентации

На мобильных устройствах поворот экрана может изменять размеры окна, поэтому полезно реагировать на событие orientationchange:

$(window).on('orientationchange', function() {
    $('.featherlight').each(function() {
        $(this).featherlight('position');
    });
});

Особенности:

  • Метод position пересчитывает расположение окна, сохраняя центрирование.
  • Это особенно важно для модальных окон с фиксированной шириной и высотой.

Минимизация влияния на производительность

Мобильные устройства имеют ограниченные ресурсы, поэтому Featherlight позволяет минимизировать нагрузку:

  • Использовать отложенную инициализацию (delegated вызовы), чтобы окна создавались только при необходимости.
  • Ограничивать количество одновременно открытых модальных окон.
  • Уменьшать объём DOM внутри модального окна.
$('body').featherlight({
    delegate: '.open-lightbox',
    beforeOpen: function(event) {
        // подготовка контента
    }
});

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

Интерактивные элементы и тач-управление

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

  • Минимальный рекомендуемый размер элементов: 44×44 пикселя.
  • Расстояние между интерактивными элементами должно быть не менее 8–10 пикселей.
  • Featherlight позволяет кастомизировать кнопки и добавлять их внутрь контента через afterContent или шаблоны.
$.featherlight('<p>Контент</p>', {
    afterContent: function() {
        $('<button class="close-btn">Закрыть</button>')
            .appendTo(this.$content)
            .on('click', $.featherlight.close);
    }
});

Поддержка мобильных браузеров

Featherlight корректно работает в большинстве современных мобильных браузеров, включая Safari на iOS и Chrome на Android. Важно учитывать следующие моменты:

  • position: fixed может вести себя нестабильно на некоторых устройствах при появлении виртуальной клавиатуры.
  • Для стабильного поведения рекомендуется использовать position: absolute с пересчетом позиции через метод position() при изменении размеров окна.

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

Оглавление