Условия в jQuery при ширине экрана менее 960 пикселей

Быстрый ответ

Вот пример кода, который срабатывает при уменьшении ширины экрана до значения в 960 пикселей и ниже, используя window.matchMedia:

// Активируем функцию уменьшения!
if (window.matchMedia('(max-width: 959px)').matches) {
  // Здесь выполняется наш уникальный код!
}

// Отслеживаем изменение размера окна
window.addEventListener('resize', () => {
  if (window.matchMedia('(max-width: 959px)').matches) {
    // Код, срабатывающий при уменьшении окна
  }
});

Определение ширины экрана

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

Выбор между Window и Screen

Вот основные методы для определения ширины экрана:

• window.innerWidth учитывает видимую область окна браузера, включая полосу прокрутки.
• screen.width отображает реальное разрешение всего экрана, вместо только той части, которую занимает окно браузера.

Для адаптивного дизайна предпочтительней использовать window.innerWidth или $(window).innerWidth() в jQuery, чтобы определить актуальную область под контент.

Подробнее об этом расскажет наш спикер на видео

Сочетание CSS и JavaScript

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

// Инициализация медиа-запроса
const mediaQuery = window.matchMedia('(max-width: 959px)');

function handleSizeChange(query) {
  if (query.matches) {
    // Если ширина экрана становится меньше
  } else {
    // Для широких экранов
  }
}

// Устанавливаем обработчик изменений
mediaQuery.addListener(handleSizeChange);
// Инициируем проверку
handleSizeChange(mediaQuery);

Не забывайте снимать слушатели после их использования через $(window).off() или mq.removeListener(handleWidthChange), чтобы избежать утечек памяти.

Реакция на изменение размера

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

$(window).resize(function() {
  if ($(window).width() < 960) {
    // Код для компактных экранов
  } else {
    // Код для более широких экранов
  }
});

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

Визуализация

Представим экран как дорогу, а ширину экрана как разные виды транспортных средств, которые могут по ней перемещаться:

Ширина экрана: 🚗🚚🚌 (допускаются все, если >960px)

Когда ширина сокращается:

Ширина экрана: 🚗 (только маленькие авто, если <960px)

Действие JavaScript:

if(window.innerWidth < 960) {
    // 🚗: Вперёд, маленькие машины!
    actCompact();
}

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

Условная загрузка для эффективности

Следите за тем, чтобы ваш код был чётким и производительным. Загружайте ресурсы или активируйте скрипты только при выполнении условий медиа-запроса:

if (window.matchMedia('(max-width: 959px)').matches) {
  // Действия для экранов меньшего размера
}

Совместимость с браузерами

Ошибка в поддержке window.innerWidth и window.matchMedia может значительно снизить стабильность работы в различных браузерах. Используйте библиотеки вроде Modernizr для альтернативных решений в старых браузерах.

Предотвращение ошибок

• Избегайте бесконечных циклов и лишних действий при срабатывании события resize.
• Используйте флаги для вспоминания о выполненных действиях и их не повторяйте.
• Для упрощения поддержки лучше использовать CSS-классы, а не инлайн стили.

Полезные материалы

1. Исчерпывающее руководство по медиа-запросам CSS
2. Учебное пособие по медиа-запросам
3. Медиа-запросы для стандартных устройств
4. Практическое использование matchMedia в JavaScript
5. Лучшие практики в области векторного дизайна
6. Отслеживание изменений размера элементов
7. Оптимизация обработки событий изменения размера