Chargement de JQuery Mobile script uniquement pour les appareils mobiles

J'ai une page web qui doit être affiché correctement sur les appareils mobiles.
Pour ce faire, j'ai chargé JQuery Mobile script dans la page de la tête. La balise head ressemble à ceci:

<head> 
    <title>Page Title</title> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

Et utilisés dans le corps des éléments de données, le rôle des attributs pour afficher des choses.
Les pages semble assez bon sur les appareils mobiles, mais il a l'air d'une manière similaire, même si la demande émane d'un non-navigateur mobile.

Je voudrais savoir si quelqu'un connait une méthode pour charger JQuery Mobile script uniquement si la demande est faite à partir d'un appareil mobile.

Ce que j'ai essayé jusqu'à présent est d'utiliser une fonction qui detectd mon agent utilisateur et charge le script si c'est un appareil mobile:

function init() {

    if(isMobile()) {
        document.write('<link  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />');
document.write('<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>');
dcument.write('<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>');
    }
}


function isMobile() {

    if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i))
            return true;
        return false;
}

OriginalL'auteur giocarmine | 2012-07-05

  1. 14

    Il est difficile de détecter si votre appareil mobile ou tablette ou un énorme écran tactile,
    mais pour commencer

    1. Utiliser un script pour détecter, à partir de http://detectmobilebrowsers.com/
    2. Test à l'aide de http://yepnopejs.com/

    Comme cela (devrait fonctionner pour le script jQuery de http://detectmobilebrowsers.com/) :

    yepnope({
  test : jQuery.browser.mobile,
  yep  : 'mobile_specific.js',
  nope : ['normal.js','blah.js']
});

    EDIT:

    Également jeter un oeil à https://github.com/borismus/device.js, pour le chargement de contenu sur la base des conditions. Je ne suis pas sûr de savoir si il vous permettra de charger conditionnelle JS fichiers.

    merci à vous, bien que la fonction que j'ai trouvée pour détecter les navigateurs mobiles semble fonctionner, detectmobilebrowsers est sûrement beaucoup plus mieux 🙂 mon principal problème est de savoir comment charger des scripts JQuery basé sur cette condition 🙁
    normal d'utilisation de Javascript lien fourni dans detectmobilebrowser.com
    il semble que peut-être je n'ai vraiment pas besoin d'en faire une condition de chargement de scripts js, donc je pense que tous les liens que vous avez fournies sont plus que j'ai besoin 🙂 merci encore!

    OriginalL'auteur Nachiket

  2. 2

    Comment déterminer si l'utilisation d'un mobile de mise en page en fonction de l'équipement de la largeur, comme CSS frameworks tels que Twitter Bootstrap? De cette façon, vous pouvez concevoir pour les petits appareils à l'aide de jQuery mobile et pour les autres à la vanille, avec jQuery? Test avec yepNope ou similaire s'applique toujours, je pense.

    OriginalL'auteur savolai 웃