Załaduj skrypt jQuery w przeglądarce na komputerze, ale nie na urządzeniu mobilnym.

Question

Chcę załadować określony skrypt/funkcję jQuery w przeglądarkach na komputerze, ale nie na przeglądarkach mobilnych. W tej chwili skrypt działa bardzo wolno w przeglądarkach mobilnych, ale działa dobrze w przeglądarkach komputerowych.

Ta funkcja to płynnie przewijająca się wtyczka, więc gdy użytkownik kliknie link, strona przewija się płynnie do kotwicy na tej samej stronie. Nie jest konieczne, aby przewijał się płynnie w przeglądarkach mobilnych - jest zbyt wolny i często nie działa.

Co powinienem dodać do mojego kodu poniżej, aby upewnić się, że jest nadal normalnie uruchamiany w przeglądarkach na komputerach, ale nie w wersji mobilnej (w szczególności na iPadzie/iPhonie/iPodzie)?

<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

Spójrz na istnienie touch, jeśli nie jest obecny to jesteś bardziej niż prawdopodobne czynienia z pulpitu:

edycji: mój oryginalny try/catch podejście było najwyraźniej przestarzałe (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

Możesz spróbować pobrać program użytkownika i użyć tych informacji, aby zdecydować, czy chcesz dołączyć płynny skrypt przewijania. Innym rozwiązaniem byłoby sprawdzenie szerokości przeglądarki, a następnie podjęcie decyzji, czy chcesz dołączyć skrypt, czy nie.

<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> 

Stosując when() wymaga jQuery 1,5 lub wyższej, getScript() dodano 1,0.

EDYTOWANIE jak stwierdził Travis, można również wyszukać wydarzenie dotykowe. W takim przypadku należy użyć:

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

urywek wyżej od drugiego SO odpowiedzieć tutaj: What's the best way to detect a 'touch screen' device using JavaScript?