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

Адаптация интерфейса под мобильные устройства в приложениях на Preact строится на тех же фундаментальных принципах, что и в других современных UI-фреймворках: гибкие макеты, медиазапросы, условный рендеринг и оптимизация производительности. Отличие Preact заключается в минималистичном ядре и ориентации на высокую скорость работы даже на слабых мобильных устройствах.

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

Гибкая вёрстка и CSS-стратегии

Использование Flexbox и Grid

В Preact отсутствует собственная система макетов, поэтому адаптивность полностью определяется CSS:

.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Flexbox позволяет легко менять направление, выравнивание и порядок элементов без изменения JSX-разметки. CSS Grid подходит для более сложных компоновок, особенно на планшетах и больших экранах.

Mobile-first подход

Наиболее устойчивой стратегией является mobile-first:

.card {
  padding: 12px;
  font-size: 14px;
}

@media (min-width: 1024px) {
  .card {
    padding: 24px;
    font-size: 16px;
  }
}

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

Условный рендеринг под разные экраны

В Preact логика отображения компонентов может зависеть от ширины экрана. Для этого используются хуки и браузерные API.

Хук для отслеживания размера экрана

import { useState, useEffect } from 'preact/hooks';

function useMediaQuery(query) {
  const [matches, setMatches] = useState(matchMedia(query).matches);

  useEffect(() => {
    const media = matchMedia(query);
    const listener = () => setMatches(media.matches);
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [query]);

  return matches;
}

Пример использования:

const isMobile = useMediaQuery('(max-width: 767px)');

return (
  <div>
    {isMobile ? <MobileMenu /> : <DesktopMenu />}
  </div>
);

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

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

Минимизация DOM-узлов

Preact эффективно работает с виртуальным DOM, но на мобильных устройствах важно избегать избыточной вложенности:

  • объединение обёрток;
  • отказ от лишних div;
  • использование фрагментов.
import { Fragment } from 'preact';

return (
  <Fragment>
    <Header />
    <Content />
  </Fragment>
);

Ленивая загрузка компонентов

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

import { lazy, Suspense } from 'preact/compat';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

<Suspense fallback={null}>
  <HeavyComponent />
</Suspense>

Это снижает объём начального JavaScript-бандла.

Работа с изображениями и медиа

Адаптивные изображения

Использование srcset и sizes:

<img
  src="image-small.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt=""
/>

Это позволяет браузеру загружать оптимальный размер изображения в зависимости от экрана и плотности пикселей.

Отложенная загрузка

<img src="photo.jpg" loading="lazy" alt="" />

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

Сенсорное взаимодействие и UX

Размеры интерактивных элементов

Кнопки и ссылки должны учитывать сенсорное управление:

button {
  min-height: 44px;
  min-width: 44px;
}

Обработка касаний

В Preact используются стандартные события:

<button onTouchSt art={handleTouch}>...</button>

При этом важно избегать дублирования onClick и onTouchStart, чтобы не вызывать действия дважды.

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

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

  • выносить тяжёлые вычисления за пределы рендера;
  • использовать useMemo и useCallback;
  • дробить состояние на локальное и глобальное.
const value = useMemo(() => compute(data), [data]);

Preact отличается малым размером runtime, что делает его особенно подходящим для мобильных приложений, включая PWA.

Поддержка PWA и офлайн-режима

Адаптация под мобильные устройства тесно связана с прогрессивными веб-приложениями:

  • Service Worker для кеширования;
  • офлайн-страницы;
  • иконки и манифест.

Preact легко интегрируется с PWA-инструментами за счёт минимальных зависимостей и совместимости с экосистемой React.

Тестирование мобильной адаптации

Для проверки используются:

  • эмуляторы в DevTools;
  • реальные устройства;
  • Lighthouse и Web Vitals.

Особое внимание уделяется:

  • времени загрузки;
  • отзывчивости интерфейса;
  • стабильности при повороте экрана.

Архитектурные решения

При разработке адаптивных интерфейсов на Preact целесообразно:

  • проектировать компоненты с учётом разных размеров экрана;
  • разделять UI-логику и стили;
  • использовать дизайн-систему с адаптивными токенами.

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

Оглавление