【问题标题】:How to disable a script when on mobile device如何在移动设备上禁用脚本
【发布时间】:2014-12-18 19:36:51
【问题描述】:

我有一个具有视差滚动效果的网站,它正在运行 skrollr.js 脚本。这是一个移动优先的网站,但我希望脚本不能在移动设备上运行,因为它不允许滚动。有谁知道如何防止脚本在移动设备上运行?谢谢。

上传脚本的代码位于正文部分的末尾。如果需要任何其他代码,请告诉我。

<!-- SCRIPTS -->

<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
    skrollr.init();
</script>

<!--/ SCRIPTS -->

【问题讨论】:

  • 你是否在使用一些检测库,比如modernizr
  • 可能在给定容器上做一些 css 媒体查询。
  • 这里的所有解决方案都像是在谈论移动设备 === 小浏览器窗口。也许我们应该问一下,他的意思是真的没有移动设备还是没有小屏幕,如果不是移动设备,移动设备是否包括平板电脑。
  • @MelanciaUK - 我试图变得更有建设性,但确实如此。 :)
  • “让 javascript 检查它是否在移动设备上”......男人有很多问题

标签: javascript jquery html css mobile


【解决方案1】:

您可以使用modernizr 的触摸检测来检查它是否是触摸设备,如果是,则不要初始化脚本。

if (Modernizr.touch) {

}
else 
{
    skrollr.init();
}

或者您可以检查用户代理(这可能不是您的最佳选择,因为用户代理并不总是可靠的),然后编写一个简单的 if else,在 else 中使用 skrollr init

  var isMobile = {
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };

        if (isMobile.any()) {

        }
        else {

             skrollr.init(); 
        }

另一种测试方法是检查window.innerWidth,并且仅在屏幕尺寸大于 760 像素时才初始化脚本:

if (window.innerWidth > 760) {
skrollr.init();
}

【讨论】:

  • 不要假设“触摸设备”等于“小屏幕”。
  • @Blazemonger true,这不会在此设备上产生预期的效果。你能想到更好的解决方案吗?
  • “移动设备”对我来说意味着“小屏幕”,宽度不到 760 像素。改为测试window.innerWidth
【解决方案2】:

假设如果您正在编写函数名称exampleNotForMobileDevicese(),如果窗口宽度小于 768,则下一个代码不会执行,因为我们使用了 return,即如果条件满足,则执行将停止

function exampleNotForMobileDevicese(){
  if(window.innerwidth < 768){
      return
    }
   your business logics.......

}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-14
    • 1970-01-01
    • 2014-07-24
    • 2017-09-27
    • 2016-12-02
    相关资源
    最近更新 更多