Як використовувати Media Query в JavaScript?

Показую робочі приклади медіа запитів в JavaScript для отримання реальних розмірів екрану і подальшого використання цих значень.

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

Для адаптації дизайну сторінки під конкретні дозволу або пристрою ми звикли користуватися медіа-запитами CSS (media query).

/ * Smartphones (portrait) ----------- * / @media only screenand (max-width: 320px) {} / * Desktops and laptops ----------- * / @media only screenand (min-width: 1224px) {} / * Large screens ----------- * / @media only screenand (min-width: 1824px) {}

Наведений вище CSS-код дозволить вам стилізувати сторінку під три різних пристрої. Але як бути, якщо вам крім зміни зовнішнього вигляду необхідно змінити функціонал сайту в залежності від розміру екрана? Наприклад, таке завдання часто постає при адаптації під мобільні девайси різних слайд-шоу.

Щоб дізнатися розмір екрану пристрою, медіа запити перевіряють ширину вікна. Тому, можна припустити, що ми можемо використовувати метод width () для об'єкта вікна, як в прикладі нижче.

if ($ (window) .width () <767) {// change functionality for smaller screens} else {// change functionality for larger screens}

Однак, цей метод не поверне вам істинного значення розміру вікна, так як не враховуються розміри відступів і смуг прокручувань вікна. Інший спосіб перевірки полягає в використанні ще одного методу JavaScript для об'єкта вікна .MatchMedia ().

var window_size = window.matchMedia ( '(max-width: 768px)'));

Цей спосіб працює аналогічно стандартному медіа-замовлення CSS, і працює на всіх сучасних браузерах вище IE9. Виглядає це приблизно так:

if (window.matchMedia ( '(max-width: 768px)'). matches) {// do functionality on screens smaller than 768px}

Давайте спробуємо використовуючи цей метод, додати подію кліка на підміню для екранів розміром не більше 768px. Код нижче є прикладом того, як можна додавши кілька рядків коду, змусити виконуватися JavaScript тільки на екранах менше, ніж 768px.

if (window.matchMedia ( '(max-width: 768px)'). matches) {$ ( '. sub-menu-button'). on ( 'click', function (e) {var subMenu = $ (this) .next ( '. sub-navigation'); if (subMenu.is ( ': visible')) {subMenu.slideUp ();} else {subMenu.slideDown ();} return false;}); }

Загалом, нічого складного.

Фото: Blake Patterson Creative Commons / flickr.com