Отключить fullpage.js на мобильных (сенсорных) устройствах

Question

Я использую fullpage.js и плагин slimscroll.js, который необходим для прокрутки в разделе, содержание которого превышает высоту его контейнера.

Я заметил, что на сенсорных устройствах опыт довольно плохой. В то время как обычно вы можете провести, отпустить и посмотреть, как страница все еще прокручивается, на элементе slimscroll, как только ваш палец покидает область касания, прокрутка останавливается.

Поэтому я хотел бы отключить fullpage.js на мобильных телефонах и планшетах, но по-прежнему включать его на настольных компьютерах. Я проверил проблемы и документацию fullPage.js, но не смог найти простой способ сделать это.

Кто-нибудь может мне помочь?

большое спасибо

Answer 1

Только не инициализируйте полную страницу на сенсорных устройствах. Вам придется иметь дело с обнаружением мобильных / сенсорных устройств. Просто найдите немного в Google или даже здесь, чтобы найти различные альтернативы.

Это должно выглядеть так:

var isPhoneDevice = [ WHATEVER FUNCTION YOU WANT TO USE ]

//if it is not a phone device...
if(!isPhoneDevice){
    //initializing fullpage...
    $.fn.fullpage();
}

ОБНОВИТЬ

На данный момент fullpage.js предоставляет другую альтернативу. С использованием responsiveWidth а также responsiveHeight опции. Таким образом fullpage.js будет работать как обычный веб-сайт с заданными значениями (в пикселях).

Это также можно сочетать с классом fp-auto-height-responsive чтобы fullPage.js не устанавливал высоту разделов на отзывчивый и давал вам полный контроль над ними.

Больше в документах.

Answer 2

Я использую этот способ!

var isPhoneDevice = "ontouchstart" in document.documentElement; 
$(document).ready(function() {
        if(isPhoneDevice){
            //mobile
        }
            else{
                //desktop               
                $.fn.fullpage();
            }
        });

Answer 3

Еще проще, что я наткнулся здесь на Stackexchange - вот что я использую:

if(screen.width < 480) { 
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}

Answer 4

Адаптивные возможности дизайна были добавлены в fullPage.js с последнего ответа. Вы можете увидеть пример по следующей ссылке.

Прочитать о responsiveWidth а также responsiveHeight в документации для деталей.