JS об'єкт MediaQueryList

Об'єкт MediaQueryList у JavaScript

Об'єкт MediaQueryList у JavaScript є потужним інструментом, який дозволяє вам взаємодіяти з медіа-запитами безпосередньо зі скрипту. У сучасному веб-розробництві адаптивний дизайн є ключовою вимогою. Це означає, що ваш сайт або веб-додаток повинен коректно відображатися на різних пристроях з різними розмірами екрану та орієнтацією.

Створення та використання MediaQueryList

MediaQueryList створюється за допомогою метода window.matchMedia(). Цей метод приймає медіа-запит як аргумент і повертає об'єкт MediaQueryList.

Приклад:

let mql = window.matchMedia('(max-width: 600px)');
console.log(mql.matches);  // повертає true, якщо ширина екрану менша або дорівнює 600px, інакше - false

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

Події MediaQueryList та їх обробники

Однією з найцікавіших особливостей MediaQueryList є можливість відслідковувати зміни у результаті медіа-запиту. Це робиться за допомогою події change.

Приклад:

let mql = window.matchMedia('(max-width: 600px)');

function handleWidthChange(e) {
    if (e.matches) {
        console.log('Екран має ширину до 600 пікселів');
    } else {
        console.log('Екран більший за 600 пікселів');
    }
}

mql.addEventListener('change', handleWidthChange);

Використовуючи обробник подій, ми можемо динамічно реагувати на зміни у розмірах екрану, наприклад, змінювати стиль або структуру веб-сторінки відповідно до умов медіа-запиту.

Властивості MediaQueryList

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

matches:

• Опис: Ця властивість вказує, чи задовольняє поточний стан пристрою умовам медіа-запиту.
• Тип даних: Boolean (true або false).
• Приклад:

let mql = window.matchMedia('(max-width: 600px)');
if (mql.matches) {
		console.log('Екран менше 600 пікселів у ширину');
} else {
		console.log('Екран 600 пікселів або більше у ширину');
}

В цьому прикладі, якщо ширина екрану користувача менше 600 пікселів, властивість matches поверне true, і в консолі буде виведено повідомлення про це. У протилежному випадку виведеться інше повідомлення.

media:

• Опис: Властивість media дозволяє отримати рядкове представлення медіа-запиту, асоційованого з конкретним об'єктом MediaQueryList.
• Тип даних: String.
• Приклад:

let mql = window.matchMedia('(orientation: portrait)');
console.log(mql.media);  // Виведе: "(orientation: portrait)"

Тут ми створили об'єкт MediaQueryList для визначення орієнтації екрану (портретна). Властивість media дозволить нам перевірити, який саме медіа-запит було використано.

Ці властивості роблять MediaQueryList дуже корисним, коли вам потрібно робити умовні перевірки або відслідковувати зміни у відповідності до медіа-запитів, не використовуючи CSS.

Синтаксис

let mediaQueryList = window.matchMedia();

Переглядачі

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

Приклади

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

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

function toggleTheme(e) {
    if (e.matches) {
        document.body.classList.add('dark-theme');
    } else {
        document.body.classList.remove('dark-theme');
    }
}

mql.addEventListener('change', toggleTheme);
toggleTheme(mql); // Для первісної установки теми

let mql = window.matchMedia('(max-width: 768px)');

function adaptNavbar(e) {
    const navbar = document.querySelector('.navbar');
    if (e.matches) {
        navbar.classList.add('hamburger-menu');
    } else {
        navbar.classList.remove('hamburger-menu');
    }
}

mql.addEventListener('change', adaptNavbar);
adaptNavbar(mql); // Для первісної установки стилю навігаційної панелі

let mql = window.matchMedia('(forced-colors: active)');

function notifyHighContrast(e) {
    if (e.matches) {
        alert('Ви використовуєте режим високого контрасту. Дизайн сайту може відрізнятися.');
    }
}

mql.addEventListener('change', notifyHighContrast);
notifyHighContrast(mql); // Для первісного виявлення установок

Методи

Властивості