Laden Sie jQuery-Skript in Desktop-Browser, aber nicht mobil

Question

Ich möchte ein bestimmtes jQuery-Skript/Funktion in Desktop-Browsern laden, aber nicht mobile Browser. Im Moment läuft das Skript in mobilen Browsern sehr langsam, funktioniert aber auf Desktop-Browsern gut.

Bei der fraglichen Funktion handelt es sich um ein reibungsloses Scrolling-Plugin. Wenn ein Benutzer auf einen Link klickt, scrollt die Seite nahtlos zum Anker auf derselben Seite. Es ist nicht erforderlich, dass es in mobilen Browsern problemlos gescrollt wird - es ist zu langsam und funktioniert oft nicht.

Was müsste ich meinem unten stehenden Code hinzufügen, um sicherzustellen, dass er in Desktop-Browsern weiterhin ausgeführt wird, aber nicht auf Mobilgeräten (insbesondere 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> 

Answer 1

jsFiddle Demo

Blick für die Existenz von touch, wenn es nicht vorhanden ist, dann ist es mehr als wahrscheinlich, mit einem Desktop zu tun:

bearbeiten: meine ursprüngliche try/catch Ansatz wurde anscheinend veraltet (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 */ } 
}); 

Answer 2

Sie können entweder versuchen, den Benutzeragenten abzurufen, und anhand dieser Informationen entscheiden, ob Sie das Skript für den reibungslosen Scrollvorgang einfügen möchten. Eine andere Lösung wäre, nach der Browserbreite zu suchen und dann zu entscheiden, ob Sie das Skript einfügen möchten oder nicht.

<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() Verwendung erfordert jQuery 1,5 oder höher, getScript() in 1.0 aufgenommen.

BEARBEITEN als Travis angegeben, Sie könnten auch nach dem Touch-Ereignis suchen. In diesem Fall sollten Sie verwenden:

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

Snippet oben aus dem zweiten SO hier beantworten: What's the best way to detect a 'touch screen' device using JavaScript?