Как использовать Media Query в 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-код позволит вам стилизовать страницу под три различных устройства. Но как быть, если вам помимо изменения внешнего вида необходимо изменить функционал сайта в зависимости от размера экрана? К примеру, такая задача часто встает при адаптации под мобильные девайсы различных слайд-шоу.

Как использовать Media Query в JavaScript

Чтобы узнать размер экрана устройства, медиа запросы проверяют ширину окна. Поэтому, можно предположить, что мы можем использовать метод 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;
	});
}

В общем, ничего сложного.