JavaScript matchMedia() — медіазапит із JavaScript

Метод matchMedia() перевіряє медіазапит із JavaScript — той самий рядок, що й у CSS.

правити

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

Порівнювати innerWidth із числом — спокусливо й неправильно: CSS вважає ширину інакше (він враховує смугу прокрутки), тож JavaScript і стилі почнуть розходитись у відповіді на питання «це мобільний?». matchMedia() питає той самий движок, що застосовує CSS — розходження неможливе.

Повертає об'єкт зі властивістю matches (true/false) і подією change, яка спрацьовує лише в мить переходу через межу, а не на кожен піксель зміни розміру, як resize.

Ним же читають налаштування системи: темна тема (prefers-color-scheme) і вимкнені анімації (prefers-reduced-motion).

правити

Порада

Перед будь-якою анімацією з коду перевіряй prefers-reduced-motion — для людей із вестибулярними розладами зайвий рух буквально викликає нудоту.

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

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

Переглядачі

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

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

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

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

Переглядач
matchMedia	3+	yes	yes	5+

Приклади

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

<div id="fade">Блок з анімацією появи</div>

const element = document.getElementById('fade');

const dark = window.matchMedia('(prefers-color-scheme: dark)');

console.log(dark.matches); // true, якщо система в темній темі

// спрацює лише в мить перемикання, а не на кожен піксель
dark.addEventListener('change', event => {
    console.log(event.matches ? 'темна' : 'світла');
});

// узгоджено з CSS, на відміну від innerWidth < 768
const desktop = window.matchMedia('(min-width: 768px)');
console.log('Широкий екран:', desktop.matches);

// не анімуємо, якщо людина попросила не рухати
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    element.animate([{ opacity: 0 }, { opacity: 1 }], 300);
}