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 правити

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

Переглядачі

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

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

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

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

Переглядач
	3	18	6	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);
}