JS метод Object.matchMedia()

Загальний опис

Метод matchMedia() є важливою складовою об'єкта Window у мові програмування JavaScript. Цей метод дає можливість виконувати медіазапити (media queries) у JavaScript, схоже до тих, що використовуються в CSS для адаптивного дизайну. Основна суть методу полягає у визначенні, чи відповідає поточне середовище певним медіа-умовам. Це корисно для адаптації макету веб-сторінки чи функціональності за різних розмірів вікна браузера або різних типів пристроїв.

Метод matchMedia() приймає один аргумент - рядок, що представляє медіа-запит, і повертає об'єкт MediaQueryList. Цей об'єкт містить інформацію про те, чи задовольняє середовище умовам медіа-запиту (matches), а також дозволяє реєструвати слухачів для відстеження змін.

const mediaQueryList = window.matchMedia("(min-width: 600px)");

У цьому прикладі matchMedia() перевіряє, чи ширина вікна браузера більша або дорівнює 600 пікселям.

Реагування на зміни

Для відстеження змін у відповідності медіа-запиту, можна використати метод addEventListener на об'єкті MediaQueryList.

function handleMediaChange(e) {
    if (e.matches) {
        console.log("Екран більше 600 пікселів у ширину");
    } else {
        console.log("Екран менше 600 пікселів у ширину");
    }
}

const mediaQueryList = window.matchMedia("(min-width: 600px)");
mediaQueryList.addEventListener("change", handleMediaChange);

У цьому коді слухач подій викликається кожного разу, коли розмір вікна перетинає поріг у 600 пікселів.

Використання у комплексних сценаріях

Метод matchMedia() може бути використаний для реалізації складніших сценаріїв адаптивного дизайну. Наприклад, можна використати кілька медіа-запитів для застосування різного стилю або поведінки в залежності від розміру вікна чи орієнтації пристрою.

const mediaQueryDesktop = window.matchMedia("(min-width: 1024px)");
const mediaQueryTablet = window.matchMedia("(min-width: 600px) and (max-width: 1023px)");
const mediaQueryMobile = window.matchMedia("(max-width: 599px)");

function updateLayout() {
    if (mediaQueryDesktop.matches) {
        // Код для десктопного вигляду
    } else if (mediaQueryTablet.matches) {
        // Код для планшету
    } else if (mediaQueryMobile.matches) {
        // Код для мобільного
    }
}

// Виклик функції при завантаженні сторінки
updateLayout();

// Виклик функції при зміні розміру вікна
window.addEventListener("resize", updateLayout);

У цьому прикладі створюються три медіа-запити для різних типів пристроїв. Функція updateLayout перевіряє, який запит відповідає поточному стану вікна, і виконує відповідний код.

Використання методу matchMedia() є критично важливим для створення адаптивних веб-додатків. Цей метод дозволяє JavaScript взаємодіяти з CSS медіа-запитами, надаючи програмістам більшу гнучкість у реалізації адаптивного дизайну. Однак, слід звернути увагу на продуктивність, оскільки надмірне використання addEventListener може призвести до зниження продуктивності веб-сторінки.

Синтаксис

matchMedia(mediaQueryString)

Параметри

*mediaQueryString

Рядок, що визначає запит медіа-запиту для аналізу у об'єкті MediaQueryList.

Return

object

Повертає новий об'єкт MediaQueryList для вказаного медіа-запиту. За допомогою властивостей та подій цього об'єкта можна виявляти відповідності та відстежувати їх зміни з плином часу.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створюємо об'єкт MediaQueryList для перевірки розміру вікна
const mediaQuery = window.matchMedia("(max-width: 768px)");

// Додаємо обробник події для зміни стану вікна
function handleWindowChange(event) {
  if (event.matches) {
    // Виконуємо код, якщо розмір вікна менше або дорівнює 768px
    console.log("Вікно менше або дорівнює 768px");
  } else {
    // Виконуємо код, якщо розмір вікна більше 768px
    console.log("Вікно більше 768px");
  }
}

// Додаємо обробник події до об'єкта MediaQueryList
mediaQuery.addListener(handleWindowChange);

// Викликаємо обробник для поточного стану вікна
handleWindowChange(mediaQuery);

// Створюємо об'єкт MediaQueryList для визначення підтримки темної та світлої теми
const prefersDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");

// Функція для встановлення теми сторінки
function setTheme() {
  if (prefersDarkTheme.matches) {
    // Встановлюємо темну тему
    document.body.classList.add("dark-theme");
  } else {
    // Встановлюємо світлу тему
    document.body.classList.remove("dark-theme");
  }
}

// Викликаємо функцію для встановлення початкової теми
setTheme();

// Додаємо обробник події для зміни теми
prefersDarkTheme.addListener(setTheme);