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() повертає об'єкт MediaQueryList, який містить властивість matches та подію change. Властивість matches має булеве значення, яке вказує, чи задовольняються умови медіа-запиту. Подія change може бути використана для відстеження змін у відповідності медіа-запитів, що дозволяє динамічно адаптувати відображення вмісту.

автор: Bond правити

Порада

Рекомендується обережно використовувати matchMedia() у JavaScript, щоб не перевантажити клієнтську частину занадто великою кількістю перевірок або змін у відповідь на зміни розмірів вікна. Оптимальним підходом є комбінування matchMedia() з CSS медіа-запитами, використовуючи JavaScript лише для тих випадків, коли стилі CSS не вистачає.

автор: Bond правити

Порада

Ефективне застосування matchMedia() передбачає розуміння логіки медіа-запитів та їх синтаксису. Наприклад, використання window.matchMedia("(max-width: 800px) and (orientation: portrait)") дозволяє реалізувати специфічну логіку для пристроїв з максимальною шириною в 800 пікселів та портретною орієнтацією. Поряд з цим, слід звернути увагу на точність та правильність формулювання медіа-запитів, щоб уникнути помилок у визначенні відповідності.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

matchMedia(mediaQueryString)

Параметри

mediaQueryString

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

автор: Bond

правити

Повернення

object

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	9	6	5.1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	3	18	6	5

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

// Створюємо об'єкт 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);