【问题标题】：Disable fullpage.js on mobile (touch) devices在移动（触摸）设备上禁用 fullpage.js
【发布时间】：2014-04-22 20:16:46
【问题描述】：

我正在使用 fullpage.js 和 slimscroll.js 插件，它是允许在内容超过其容器部分高度的部分中滚动所必需的。

我注意到触摸设备的体验非常糟糕。虽然通常您可以滑动、释放并观看页面仍然滚动，但在一个 slimscroll div 上，只要您的手指离开触摸区域，滚动就会停止。

所以我想做的是在手机和平板电脑上禁用 fullpage.js，但仍然在台式机上启用它。我查看了 fullPage.js 的问题和文档，但找不到简单的方法。

谁能帮帮我？

非常感谢

【问题讨论】：

标签： jquery fullpage.js slimscroll

【解决方案1】：

我就是这样用的！

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

【讨论】：

【解决方案2】：

只是不要在触摸设备上初始化整页。您将不得不处理移动/触摸设备检测。只需在谷歌上搜索一下，甚至在这里找到不同的替代品。

应该是这样的：

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 将在给定值（以 px 为单位）下像普通网站一样运行。

这也可以与 fp-auto-height-responsive 类结合使用，以防止 fullPage.js 将部分高度设置为响应式并让您完全控制它们。

更多in the docs 或在此帮助中心文章中了解how to disable fullpage.js on mobile devices。

【讨论】：

谢谢，暂时停了下来。我认为 Modernizr 对触摸设备检测很有用，所以我可能会这样做。

【解决方案3】：

我遇到here on 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
}

【讨论】：

【解决方案4】：

自上次回答以来，fullPage.js 已添加响应式设计可能性。您可以通过以下link查看示例。

在documentation 中了解responsiveWidth 和responsiveHeight 了解详情。

【讨论】：