Масштабирование под viewport

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

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

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

  1. CSS-свойства max-width и max-height Для контейнера модального окна (.featherlight-content) задаются ограничения через CSS:

    .featherlight-content {
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}
    • vw (viewport width) и vh (viewport height) задают размеры относительно ширины и высоты окна браузера.
    • overflow: auto позволяет включать скроллинг, если содержимое превышает допустимые размеры.

  2. Настройка параметров при инициализации Featherlight поддерживает передачу параметров при вызове:

    $.featherlight($('#modalContent'), {
    afterOpen: function() {
        adjustSize(this.$content);
    }
});

function adjustSize($content) {
    const maxWidth = $(window).width() * 0.9;
    const maxHeight = $(window).height() * 0.9;
    $content.css({
        'max-width': maxWidth,
        'max-height': maxHeight,
        'overflow': 'auto'
    });
}

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

Масштабирование изображений и медиа

Если модальное окно содержит изображения, видео или iframe, важно, чтобы они также подстраивались под размер окна:

.featherlight-content img,
.featherlight-content iframe,
.featherlight-content video {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}
  • max-width: 100% и max-height: 100% ограничивают элементы размерами контейнера.
  • Центрирование через margin: auto сохраняет эстетичное отображение на больших и малых экранах.

Респонсивное поведение при изменении окна

Featherlight предоставляет события afterOpen и beforeClose, но не имеет встроенного автоматического ресайза при изменении размеров окна. Для корректного масштабирования используется событие resize окна:

$(window).on('resize', function() {
    $('.featherlight-content').each(function() {
        const $content = $(this);
        $content.css({
            'max-width': $(window).width() * 0.9,
            'max-height': $(window).height() * 0.9
        });
    });
});

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

Контроль внутренних отступов

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

.featherlight-content {
    padding: 20px;
    box-sizing: border-box;
}
  • box-sizing: border-box гарантирует, что padding не увеличивает размеры окна сверх заданного max-width и max-height.
  • Это позволяет избежать появления горизонтального и вертикального скролла из-за внутренних отступов.

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

Текст внутри Featherlight можно адаптировать с помощью относительных единиц (em, rem, vh):

.featherlight-content p {
    font-size: 2vh;
}
  • Такой подход делает шрифты подстраивающимися под высоту окна, обеспечивая читабельность на малых экранах.
  • Для больших экранов можно использовать медиазапросы, чтобы увеличивать шрифт:
@media (min-width: 1200px) {
    .featherlight-content p {
        font-size: 1.2rem;
    }
}

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

Для создания модального окна, полностью адаптивного под viewport, используется комбинация:

  • CSS-ограничения размеров и внутренних отступов.
  • Динамическое вычисление размеров через JavaScript.
  • Масштабирование изображений и медиа.
  • Респонсивное управление шрифтом.
  • События resize для автоматического обновления размеров.
$.featherlight($('#modalContent'), {
    afterOpen: function() {
        const $content = this.$content;
        adjustSize($content);
        $(window).on('resize.featherlight', function() {
            adjustSize($content);
        });
    },
    beforeClose: function() {
        $(window).off('resize.featherlight');
    }
});

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

Оглавление