javascript - Disable fullpage js on mobile devices

Question

I tried to disable the fullpage js for mobile devices but it is not working. The script i am using is :

    <script>
     var isPhoneDevice = "ontouchstart" in document.documentElement; 
$(document).ready(function() {
        if(isPhoneDevice){
            //mobile
        }
            else{
                 $(document).ready(function(){
             $('#fullpage').fullpage();
        responsive: 700 // here is solution
         })
            }
        });
     </script>

website link : http://demo.lamppostmedia.in/arklan-dev/

Help me disable it.

Answer 1

There's no such thing as a "mobile device" anymore. Is a table a mobile device? Is a touch screen laptop consider a desktop?

The right way to deal with this is basing the behaviour on the resolution of the device the visitor is accessing from.

That's why fullPage.js version 3 provides the options responsiveWidth and responsiveHeight that allow you to turn off the snap effect when reaching certain threshold.

See the Responsive width example for fullPage.js.

And the examples code here: https://github.com/alvarotrigo/fullPage.js/tree/master/examples

You can read more about responsive options in the the fullpage.js documentation:

responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.