Настройки для мобильных экранов

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

Адаптивное позиционирование

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

iziToast.show({
    title: 'Пример',
    message: 'Уведомление на мобильном',
    position: 'bottomRight', // оптимально для сенсорных экранов
});

Основные позиции для мобильных:

  • topRight – верхний правый угол
  • topLeft – верхний левый угол
  • bottomRight – нижний правый угол
  • bottomLeft – нижний левый угол
  • center – центр экрана, использовать с осторожностью на небольших устройствах

Размеры уведомлений

На мобильных устройствах важно контролировать ширину и высоту уведомлений. Параметры maxWidth и timeout позволяют обеспечить читаемость и корректное отображение:

iziToast.show({
    title: 'Сообщение',
    message: 'Текст уведомления адаптирован для мобильного',
    maxWidth: 300, // ограничение ширины для смартфонов
    timeout: 5000, // автоматическое закрытие через 5 секунд
});

Рекомендации по ширине для мобильных экранов:

  • Смартфоны: 280–320px
  • Планшеты: 350–400px
  • Избегать ширины больше 90% экрана

Мобильное взаимодействие

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

  • drag: позволяет пользователю смахивать уведомление, чтобы закрыть его
  • closeOnClick: уведомление закрывается по тапу, что облегчает управление на маленьких экранах
iziToast.show({
    title: 'Интерактивное уведомление',
    message: 'Можете смахнуть или нажать, чтобы закрыть',
    drag: true,
    closeOnClick: true,
});

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

Параметры titleSize, messageSize позволяют адаптировать текст под мобильные экраны. Для телефонов рекомендуется уменьшать размер шрифта на 1–2 пункта по сравнению с десктопной версией.

iziToast.show({
    title: 'Мобильный заголовок',
    message: 'Текст уведомления',
    titleSize: 16,
    messageSize: 14
});

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

Для лучшей адаптации можно использовать JavaScript для динамического изменения настроек в зависимости от ширины экрана:

let toastOptions = {
    title: 'Уведомление',
    message: 'Адаптация под размер экрана',
};

if(window.innerWidth <= 480) {
    toastOptions.maxWidth = 280;
    toastOptions.position = 'bottomRight';
    toastOptions.titleSize = 16;
    toastOptions.messageSize = 14;
}

iziToast.show(toastOptions);

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

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

На маленьких экранах важна плавная анимация без резких сдвигов. Параметры animateInside и transitionIn/transitionOut позволяют управлять этим:

iziToast.show({
    title: 'Анимация',
    message: 'Плавное появление и исчезновение',
    animateInside: true,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
});

Учет сенсорного взаимодействия и клавиатуры

На мобильных устройствах уведомления не должны перекрывать элементы ввода. Можно использовать CSS медиа-запросы или JavaScript для смещения уведомлений при появлении клавиатуры. Например, изменение позиции на topRight при открытой клавиатуре.

Итоговые рекомендации

  • Позиция: нижний угол (bottomRight или bottomLeft) для смартфонов
  • Размеры: ограничивать ширину уведомлений до 280–320px
  • Взаимодействие: поддерживать drag и closeOnClick
  • Текст: уменьшать размеры шрифтов для мобильных
  • Анимации: использовать плавные fade или slide эффекты
  • Динамика: применять проверку ширины экрана и менять настройки через JavaScript

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

Оглавление