9

我想在桌面浏览器中加载特定的 jQuery 脚本/函数，而不是移动浏览器。目前，该脚本在移动浏览器上运行非常缓慢，但在桌面浏览器上运行良好。

有问题的功能是一个平滑滚动插件，因此当用户单击链接时，页面会平滑滚动到同一页面上的锚点。它没有必要在移动浏览器上平滑滚动——它太慢了，而且经常不起作用。

我需要在下面的代码中添加什么以确保它仍然在桌面浏览器中正常执行，但不能在移动设备（尤其是 iPad/iPhone/iPod）中执行？

  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/lib/jquery/jquery.js"%3E%3C/script%3E'));</script>    
<script src="js/css_browser_selector.js"></script>
<script src="js/src/jquery.smooth-scroll.js">    
</script>
<script src="js/lib/jquery.ba-bbq.js"></script>
<script>
$(document).ready(function() {
  $('a[href*="#"]').live('click', function() {
    if ( this.hash ) {
      $.bbq.pushState( '#/' + this.hash.slice(1) );
      return false;
    }
  });

  $(window).bind('hashchange', function(event) {
    var tgt = location.hash.replace(/^#\/?/,'');
    if ( document.getElementById(tgt) ) {
      $.smoothScroll({scrollTarget: '#' + tgt});
    }
  });

    $(window).trigger('hashchange');
});
 </script>
4

2 回答 2

11

jsFiddle 演示

寻找 的存在touch，如果它不存在，那么您很可能正在处理桌面：

编辑：我原来的 try/catch 方法显然已被弃用（https://stackoverflow.com/a/4819886/1026459）

$(document).ready(function() {
 var isDesktop = (function() {
  return !('ontouchstart' in window) // works on most browsers 
  || !('onmsgesturechange' in window); // works on ie10
 })();
 //edit, if you want to use this variable outside of this closure, or later use this:
 window.isDesktop = isDesktop;
 if( isDesktop ){ /* desktop things */ }
});
于 2013-03-31T18:26:36.887 回答
4

您可以尝试检索用户代理并使用该信息来决定是否要包含平滑滚动脚本。另一种解决方案是检查浏览器宽度，然后决定是否要包含脚本。

<script>
(function ($) {
   if(is_touch_device()) {
      $.when(
         $.getScript( "/mypath/myscript1.js" ),
         $.getScript( "/mypath/myscript2.js" ),
         $.getScript( "/mypath/myscript3.js" ),
         $.Deferred(function( deferred ){
            $( deferred.resolve );
         })
      ).done(function(){
          //place your code here, the scripts are all loaded
      });
   }
})(jQuery);
</script>

使用when()需要 jQuery 1.5 或更高版本，getScript()是在 1.0 中添加的。

编辑正如 travis 所说，您还可以寻找触摸事件。在这种情况下，您应该使用：

function is_touch_device() {
  return !!('ontouchstart' in window) // works on most browsers 
      || !!('onmsgesturechange' in window); // works on ie10
};

上面第二个 SO 答案的片段：使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？

于 2013-03-31T18:31:59.740 回答