Адаптивная верстка на JavaScript. Аналог @media для jQuery скриптов

В данной записи я вам покажу как сделать проверку ширины экрана устройства , с помощью jQuery. Это нужно для того чтобы вы могли прописывать JavaScript код который будет срабатывать при определенной ширине экрана устройства.

Медиа запросы позволяют изменять стили, при заданных условиях, а что если нам нужно выводить определенное сообщение для пользователей которые зашли на сайт с телефона. Или в моем случае я использовал этот метод, чтобы отключать вывод виджета сообщества, для пользователей которые зашли с телефона или с планшета, чтобы не нагружать сайт и увеличить скорость загрузки.

И так… нам понадобится библиотеку jQuery и вот такая, простая, функция.

/*ПОДКЛЮЧАЕМ БИБЛИОТЕКУ JQUERY*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

$(window).resize(function () {
    /*ПОЛУЧАЕТ ТЕКУЩУЮ ШИРИНУ ЭКРАНА*/
    var widthWind = $(this).width();

    if (widthWind <= 750) {
       /*КОД КОТОРЫЙ ДОЛЖЕН ВЫПОЛНЯТЬСЯ*/
    }
}
);

Так же я находил более сложные структуры кода, вроде вот этих…

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

Но мне понравился первый вариант, так как он проще и компактнее.

Аналог на нативном JavaScript

Вот тот же эффект без использования jQuery.

document.addEventListener("DOMContentLoaded", function(event) { 
        /*ПОЛУЧАЕТ ТЕКУЩУЮ ШИРИНУ ЭКРАНА*/
        var widthWind = document.querySelector('body').offsetWidth;
        if (widthWind <= 750) {
             /*КОД КОТОРЫЙ ДОЛЖЕН ВЫПОЛНЯТЬСЯ*/
        }
});