matchMedia — WebNoob.ru

JavaScript: Проверка ширины экрана

Небольшой пост-памятка, как проверить разрешение экрана пользователя.

Естественно все уже продумано за нас и выполняется стандартными средствами:

window.matchMedia('(max-width: 480px)').matches

1	window.matchMedia('(max-width: 480px)').matches

А тек-же пример функции которая будет запускаться каждый раз, когда заданное разрешение медиа запроса достигнуто

var handleMatchMedia = function (mediaQuery) {
        if (mediaQuery.matches) {
            // если менее 480px или равное, то выполняется код между скобок 
        } else {
            // обратное условие, т.е если более 480px
        }
    },
    mdia = window.matchMedia('all and (max-width: 480px)');

// Первый запуск 
handleMatchMedia(mdia);
mdia.addListener(handleMatchMedia);

var handleMatchMedia = function (mediaQuery) {

if (mediaQuery.matches) {

// если менее 480px или равное, то выполняется код между скобок

} else {

// обратное условие, т.е если более 480px

}

mdia = window.matchMedia('all and (max-width: 480px)');

// Первый запуск

handleMatchMedia(mdia);

mdia.addListener(handleMatchMedia);