Удаление класса при изменении разрешения экрана

Question

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

$(window).resize(function() {
            if ($(window).width() < 1100) {
                $('.mobile').removeClass('section');
            } else {
                $('.mobile').addClass('section');
            }
        }).resize();

Но у меня получилось только просто удалить данный класс, не имеет значения какой экран, класс просто удаляется и все. Скрипт который необходимо отключить называется fullpage, возможно кто-то с таким работал.

Answer 1

Если вопрос, как из JavaScript подписаться на изменение медиа селектора, то это делается так

(function() {

  matchMedia('only screen and (min-width:480px)').addEventListener('change', () => console.log('Smartphone'))
  matchMedia('only screen and (min-width:600px)').addEventListener('change', () => console.log('Tablet (portrait)'))
  matchMedia('only screen and (min-width:801px)').addEventListener('change', () => console.log('Tablet (landscape)'))
  matchMedia('only screen and (min-width:1025px)').addEventListener('change', () => console.log('Desktop'))

})();

Если вопрос, как переключить класс mobile у выбранных заранее элементов, то это делается через промежуточный класс

document.querySelectorAll('.target.mobile')
  .forEach((el) => el.classList.remove('mobile'))

БЛОГ НА HUSL

Удаление класса при изменении разрешения экрана

Ответы (1 шт):