1

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

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

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

3
  • 1
    и часто у вас клиент открыв на мобильном экране страницу начинает ее масштабировать? Есть медиа-запросы, их можно вычислять с помощью js. Подключайте свой скрипт, если проходит проверку. Либо, например, скройте какой-нить элемент для мобильных устройств с помощью этих же стилей, а в js проверьте видимость этого элемента, после чего подключайте или не подключайте свой скриптю
    – teran
    16 дек 2020 в 22:38
  • Сразу уточню. Мобильная версия сайта, это простая версия адаптированная медиа запросами под мобильные экраны. По поводу подключения скрипта. Я думал сделать проверку как и написал выше просто при ее прохождении вставлять или не вставлять в разметку html тег скрипт со ссылкой на скрипт файл, но не получилось. По этому решил пойти другим путем, который тоже не срабатывает, хотя по идее должен. 17 дек 2020 в 6:46
  • А попробуйте пойти третьим путем - правильным. Если у вас в принципе возникла такая ситуация, значит, проблема в подходе. Насчет скрипта: проверяйте, на каком девайсе открыта страница и подгружайте скрипт только для не-мобильных. По user-agent выясняйте ,или еще как.... 17 дек 2020 в 10:59

1 ответ 1

0

Если вопрос, как из 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'))
2
  • Я правильно понял, во втором варианте, мы пишем .target(класс возле которого находится интересующий нас класс).mobile(класс с которым проводим манипуляции)? 19 дек 2020 в 14:07
  • @EugeneKobeliaksky Все верно. Если ответ помог, сделайте соответствующую отметку 19 дек 2020 в 17:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.