Выполнение js в зависимости от ширины экрана

Рассмотрим два способа как выполнить js код в зависимости от ширины экрана, а затем и высоты. 1 способ — с помощью нативного js, 2 способ — используя jQuery.

1 способ — нативный JavaScript.

Выполнение js кода на экранах шириной более 768px.

if (document.documentElement.clientWidth > 768) {

}

Пример: если разрешение экрана меньше 1200px — выполнение одного кода.

Если разрешение больше 1200px — другого.

if (document.documentElement.clientWidth < 1200) {

} else {

};

2 способ — с помощью jQuery.

Выполнение JavaScript кода на разрешениях более 992px после загрузки DOM-дерева.

jQuery(($) => {
    if ($(window).width() > 992) {

    }
});

Выполнение js в зависимости от высоты экрана

Аналогичным образом можно выполнять JavaScript в зависимости от высоты экрана.

if (document.documentElement.clientHeight < 576) {

}

jQuery:

if ($(window).height() > 1600) {

}

Полезные ссылки:

• Подключение jQuery.
• Шпаргалка по использованию jQuery.