Выполнение js в зависимости от ширины экрана - Web-Global: Связывая миры через веб-технологии

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

Пост опубликован 27 октября 2022 в 14:29 и находится в рубриках Js. 163
Поделиться:

Рассмотрим два способа как выполнить 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) {

}

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