Media Query in jQuery
CSS

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

9 июня 2014 3 137 3

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

Reg.ru: Регистрация доменов
Reg.ru: Регистрация доменов

Для адаптации дизайна страницы под конкретные разрешения или устройства мы привыкли пользоваться медиа-запросами 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 в jQuery?

Или выражаясь простым языком: как изменить функционал сайта в зависимости от разрешения экрана?

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

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии
  • Vlad

    Спасибо!

  • Denis

    IE9? Opera mini на мобилках?
    Это быстрое и хорошее решение но не для всех девайсов.
    http://caniuse.com/#feat=matchmedia — смотреть здесь

    Лучшим решением будет использование Modernizr и его media queries

    if (Modernizr.mq(‘(max-width: 544px)’)) {
    // необходимые действия
    } else {
    //другие действия
    }

  • Bano Notit

    А причём тут jq? Она как всегда выполняет свою работу — работает с dom. Никакого использования медийных запросов в jq я тут не увидел. Простое использование js мейдиников. jq тут ключевой роли не играет.

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее