Quel est le meilleur moyen de détecter un périphérique mobile dans jQuery?

Au lieu d'utiliser jquery, vous pouvez utiliser un javascript simple pour le détecter:

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // some code.. } 

Ou vous pouvez les combiner tous les deux pour le rendre plus accessible via jQuery …

 $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); 

Maintenant $.browser renverra "device" pour tous les périphériques ci-dessus

Remarque: $.browser supprimé sur jQuery v1.9.1 . Mais vous pouvez l'utiliser en utilisant le code de plugin de migration jQuery

Une version plus complète:

 var isMobile = false; //initiate as false // device detection if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true; 

Pour moi, la petite est belle alors j'utilise cette technique:

Dans le fichier CSS:

 /* Smartphones ----------- */ @media only screen and (max-width: 760px) { #some-element { display: none; } } 

Dans le fichier jQuery / Javascript:

 $( document ).ready(function() { var is_mobile = false; if( $('#some-element').css('display')=='none') { is_mobile = true; } // now i can use is_mobile to run javascript conditionally if (is_mobile == true) { //Conditional script here } }); 

Mon objectif était d'avoir mon site «mobile amical». Donc, j'utilise les requêtes Médias CSS pour afficher / masquer les éléments en fonction de la taille de l'écran.

Par exemple, dans ma version mobile, je ne veux pas activer Facebook Like Box, car il charge toutes ces images de profil et toutes choses. Et ce n'est pas bon pour les visiteurs mobiles. Donc, en plus de cacher l'élément conteneur, je le fais aussi dans le bloc de code jQuery (ci-dessus):

 if(!is_mobile) { (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); } 

Vous pouvez le voir en action à http://lisboaautentica.com

Je travaille toujours sur la version mobile, donc ça ne semble toujours pas être le cas, à la lumière de l'écriture.

Mise à jour par dekin88

Il existe une API JavaScript intégrée pour détecter les médias. Plutôt que d'utiliser la solution ci-dessus, utilisez simplement ce qui suit:

 $( document ).ready(function() { var isMobile = window.matchMedia("only screen and (max-width: 760px)"); if (isMobile.matches) { //Conditional script here } }); 

Prise en charge du navigateur: http://caniuse.com/#feat=matchmedia

L'avantage de cette méthode est que ce n'est pas seulement plus simple et plus simple, mais vous pouvez cibler de manière conditionnelle différents appareils tels que les smartphones et les tablettes séparément si nécessaire sans avoir à ajouter d'éléments fausses dans le DOM.

Selon Mozilla – Détection du navigateur à l'aide de l'agent utilisateur :

En résumé, nous vous recommandons de rechercher la chaîne "Mobi" n'importe où dans l'agent utilisateur pour détecter un périphérique mobile.

Comme ça:

 if (/Mobi/.test(navigator.userAgent)) { // mobile! } 

Cela correspond à tous les agents utilisateurs de navigateurs mobiles courants, y compris les mobiles Mozilla, Safari, IE, Opera, Chrome, etc.

Ce que vous faites en voulant détecter un périphérique mobile, c'est un peu trop proche d'un concept de «sniffing de navigateur» IMO. Il serait probablement préférable d'effectuer une détection de certaines fonctionnalités. Les bibliothèques comme http://www.modernizr.com/ peuvent vous aider.

Par exemple, où est la ligne entre mobile et non mobile? Il devient de plus en plus flou tous les jours.

Ce n'est pas jQuery, mais j'ai trouvé ceci: http://detectmobilebrowser.com/

Il fournit des scripts pour détecter les navigateurs mobiles dans plusieurs langues, dont l'un est javascript. Cela peut vous aider avec ce que vous recherchez.

Cependant, puisque vous utilisez jQuery, vous voudrez peut-être connaître la collection jQuery.support. C'est une collection de propriétés pour détecter les capacités du navigateur actuel. La documentation est disponible: http://api.jquery.com/jQuery.support/

Comme je ne sais pas exactement ce que vous essayez d'accomplir, je ne sais pas lequel d'entre eux sera le plus utile.

Tout ce qui est dit, je pense que votre meilleur pari est de rediriger ou d'écrire un script différent sur la sortie à l'aide d'une langue côté serveur (si c'est une option). Comme vous ne connaissez pas vraiment les capacités d'un navigateur mobile x, la logique de détection et de modification côté serveur serait la méthode la plus fiable. Bien sûr, tout cela est un point discutable si vous ne pouvez pas utiliser une langue côté serveur 🙂

Un one-liner simple et efficace:

 function isMobile() { return ('ontouchstart' in document.documentElement); } 

Cependant, le code ci-dessus ne prend pas en compte l'affaire pour les ordinateurs portables avec écran tactile. Ainsi, je propose cette deuxième version, basée sur la solution @Julian :

 function isMobile() { try{ document.createEvent("TouchEvent"); return true; } catch(e){ return false; } } 

Parfois, il est souhaitable de savoir quel périphérique de marque utilise un client pour afficher le contenu spécifique à ce périphérique, comme un lien vers le magasin iPhone ou le marché Android. Modernizer est génial, mais ne vous montre que les fonctionnalités du navigateur, comme HTML5 ou Flash.

Voici ma solution UserAgent dans jQuery pour afficher une classe différente pour chaque type de périphérique:

 /*** sniff the UA of the client and show hidden div's for that device ***/ var customizeForDevice = function(){ var ua = navigator.userAgent; var checker = { iphone: ua.match(/(iPhone|iPod|iPad)/), blackberry: ua.match(/BlackBerry/), android: ua.match(/Android/) }; if (checker.android){ $('.android-only').show(); } else if (checker.iphone){ $('.idevice-only').show(); } else if (checker.blackberry){ $('.berry-only').show(); } else { $('.unknown-device').show(); } } 

Cette solution provient de Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Trouvé une solution dans: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

 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()); } }; 

Et puis pour vérifier si c'est un Mobile, vous pouvez tester en utilisant:

 if(isMobile.any()) { //some code... } 

Si par "mobile" vous voulez dire "petit écran", j'utilise ceci:

 var windowWidth = window.screen.width < window.outerWidth ? window.screen.width : window.outerWidth; var mobile = windowWidth < 500; 

Sur iPhone, vous finirez par une fenêtre.screen.width of 320. Sur Android, vous allez vous retrouver avec une fenêtre.fr Wit de 480 (bien que cela puisse dépendre de l'Android). Les iPads et les tablettes Android renvoient des nombres comme 768 afin qu'ils obtiennent la vue complète comme vous le souhaitez.

Si vous utilisez Modernizr , il est très facile d'utiliser Modernizr.touch comme mentionné précédemment.

Cependant, je préfère utiliser une combinaison de Modernizr.touch et de test d'agent utilisateur, juste pour être sûr.

 var deviceAgent = navigator.userAgent.toLowerCase(); var isTouchDevice = Modernizr.touch || (deviceAgent.match(/(iphone|ipod|ipad)/) || deviceAgent.match(/(android)/) || deviceAgent.match(/(iemobile)/) || deviceAgent.match(/iphone/i) || deviceAgent.match(/ipad/i) || deviceAgent.match(/ipod/i) || deviceAgent.match(/blackberry/i) || deviceAgent.match(/bada/i)); if (isTouchDevice) { //Do something touchy } else { //Can't touch this } 

Si vous n'utilisez pas Modernizr, vous pouvez simplement remplacer la fonction Modernizr.touch ci-dessus par ('ontouchstart' in document.documentElement)

Notez également que le test de l'agent utilisateur iemobile vous donnera une gamme plus large d'appareils mobiles Microsoft détectés que Windows Phone .

Voir aussi cette question SO

Si vous n'êtes pas particulièrement préoccupé par les petits affichages, vous pouvez utiliser la détection de largeur / hauteur. Ainsi, si la largeur est inférieure à une certaine taille, le site mobile est lancé. Ce n'est peut-être pas le moyen idéal, mais il sera probablement le plus facile à détecter pour plusieurs périphériques. Vous devrez peut-être mettre en place un spécifique pour l'iPhone 4 (grande résolution).

Voici une bonne chose pour certaines langues: http://detectmobilebrowsers.com/

Vous ne pouvez pas compter sur navigator.userAgent, pas tous les périphériques révèlent son système d'exploitation réel. Sur mon HTC, par exemple, les paramètres ("utilisation de la version mobile" sont activés / désactivés). Sur http://my.clockodo.com , nous avons simplement utilisé screen.width pour détecter de petits périphériques. Malheureusement, dans certaines versions Android, il y a un bug avec screen.width. Vous pouvez combiner cela avec l'utilisateurAgent:

 if(screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { alert("This is a mobile device"); } 

Dans une ligne de javascript:

 var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)); 

Si l'agent utilisateur contient 'Mobi' (selon MDN) et ontouchstart est disponible, il est probable qu'il s'agisse d'un appareil mobile.

Je sais que cette question a beaucoup de réponses, mais de ce que j'ai vu, personne ne s'approche de la réponse de la façon dont je pourrais résoudre cela.

Le CSS utilise la largeur (Médias) pour déterminer les styles appliqués au document Web basé sur la largeur. Pourquoi ne pas utiliser la largeur dans le JavaScript?

Par exemple, dans les requêtes Médias Bootstrap (Mobile First), il existe 4 points snap / break:

• Les petits périphériques supplémentaires sont de 768 pixels et moins.
• Les petits appareils varient de 768 à 991 pixels.
• Les périphériques moyens varient de 992 à 1199 pixels.
• Les grands périphériques sont de 1200 pixels et plus.

Nous pouvons utiliser cela pour résoudre également notre problème de JavaScript.

Tout d'abord, nous créerons une fonction qui obtient la taille de la fenêtre et renvoie une valeur qui nous permet de voir quel format de taille regarde notre application:

 var getBrowserWidth = function(){ if(window.innerWidth < 768){ // Extra Small Device return "xs"; } else if(window.innerWidth < 991){ // Small Device return "sm" } else if(window.innerWidth < 1199){ // Medium Device return "md" } else { // Large Device return "lg" } }; 

Maintenant que nous avons configuré la fonction, nous pouvons appeler anserver la valeur:

 var device = getBrowserWidth(); 

Votre question a été

Je voudrais exécuter un script différent si le navigateur est sur un périphérique de poche.

Maintenant que nous avons l'information sur le périphérique, tout ce qui reste est une instruction if:

 if(device === "xs"){ // Enter your script for handheld devices here } 

Voici un exemple sur CodePen: http://codepen.io/jacobking/pen/jWEeWG

Je suis surpris que personne n'ait souligné un site intéressant: http://detectmobilebrowsers.com/ Il a déjà fait un code dans différentes langues pour la détection mobile. Et si vous devez également détecter les comprimés, assurez-vous de vérifier la section sur le paramètre Regex supplémentaire.

Voici une fonction que vous pouvez utiliser pour obtenir une réponse vraie / fausse quant à savoir si vous utilisez un navigateur mobile. Oui, c'est le renversement du navigateur, mais parfois c'est exactement ce dont vous avez besoin.

 function is_mobile() { var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry']; for(i in agents) { if(navigator.userAgent.match('/'+agents[i]+'/i')) { return true; } } return false; } 

Regardez cette publication , elle donne un très bon code de code pour ce qu'il faut faire lorsque des périphériques tactiles sont détectés ou que faire si l'événement Touchstart s'appelle:

 $(function(){ if(window.Touch) { touch_detect.auto_detected(); } else { document.ontouchstart = touch_detect.surface; } }); // End loaded jQuery var touch_detect = { auto_detected: function(event){ /* add everything you want to do onLoad here (eg. activating hover controls) */ alert('this was auto detected'); activateTouchArea(); }, surface: function(event){ /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */ alert('this was detected by touching'); activateTouchArea(); } }; // touch_detect function activateTouchArea(){ /* make sure our screen doesn't scroll when we move the "touchable area" */ var element = document.getElementById('element_id'); element.addEventListener("touchstart", touchStart, false); } function touchStart(event) { /* modularize preventing the default behavior so we can use it again */ event.preventDefault(); } 

Je vous conseille de consulter http://wurfl.io/

En un mot, si vous importez un petit fichier JS:

 <script type='text/javascript' src="//wurfl.io/wurfl.js"></script> 

Vous obtiendrez un objet JSON qui ressemble à:

 { "complete_device_name":"Google Nexus 7", "is_mobile":true, "form_factor":"Tablet" } 

(Cela suppose que vous utilisez un Nexus 7, bien sûr) et vous pourrez faire des choses comme:

 if(WURFL.is_mobile) { //dostuff(); } 

C'est ce que vous recherchez.

Avertissement: Je travaille pour l'entreprise qui offre ce service gratuit. Merci.

Bonne réponse, merci. Petite amélioration pour prendre en charge Windows Phone et Zune:

  if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/ZuneWP7/i) ) { // some code self.location="top.htm"; } 

Utilisez ceci:

 /** * jQuery.browser.mobile (http://detectmobilebrowser.com/) * jQuery.browser.mobile will be true if the browser is a mobile device **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera); 

Ensuite, utilisez ceci:

 if(jQuery.browser.mobile) {  console.log('You are using a mobile device!'); } else {  console.log('You are not using a mobile device!'); } 

Fonction simple basée sur http://detectmobilebrowser.com/

 function isMobile() { var a = navigator.userAgent||navigator.vendor||window.opera; return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)); } 

Toutes les réponses utilisent user-agent pour détecter le navigateur, mais la détection de périphérique en fonction de l'agent utilisateur n'est pas une solution très bonne, mieux est de détecter des fonctionnalités telles que le périphérique tactile (dans jQuery nouveau, ils suppriment $.browser et utilisent $.support place).

To detect mobile you can check for touch events:

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

Taken from What's the best way to detect a 'touch screen' device using JavaScript?

How about mobiledetect.net ?

Other solutions seem too basic. This is a lightweight PHP class. It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment. You can also benefit from Mobile Detect by using any of the 3rd party plugins available for: WordPress, Drupal, Joomla, Magento, etc.

You can also detect it like bellow

 $.isIPhone = function(){ return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1)); }; $.isIPad = function (){ return (navigator.platform.indexOf("iPad") != -1); }; $.isAndroidMobile = function(){ var ua = navigator.userAgent.toLowerCase(); return ua.indexOf("android") > -1 && ua.indexOf("mobile"); }; $.isAndroidTablet = function(){ var ua = navigator.userAgent.toLowerCase(); return ua.indexOf("android") > -1 && !(ua.indexOf("mobile")); }; 

To add an extra layer of control I use the HTML5 storage to detect if it is using mobile storage or desktop storage. If the browser does not support storage I have an array of mobile browser names and I compare the user agent with the browsers in the array.

It is pretty simple. Here is the function:

 // Used to detect whether the users browser is an mobile browser function isMobile() { ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary> ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns> if (sessionStorage.desktop) // desktop storage return false; else if (localStorage.mobile) // mobile storage return true; // alternative mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile']; for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true; // nothing found.. assume desktop return false; } 

User agent strings should not be trusted alone. Solution below will work in all situations.

 function isMobile(a) { return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))); } 

and call this function:

 isMobile(navigator.userAgent || navigator.vendor || window.opera) 

You could also use server side script and set javascript variables from it.

Example in php

download http://code.google.com/p/php-mobile-detect/ and then set javascript variables.

 <script> //set defaults var device_type = 'desktop'; </script> <?php require_once( 'Mobile_Detect.php'); $detect = new Mobile_Detect(); ?> <script> device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>"; alert( device_type); </script> 

This is my code i'm using in my projects:

 function isMobile() { try { if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) { return true; }; return false; } catch(e){ console.log("Error in isMobile"); return false; } } 

I tried some of the ways and then I decided to fill a list manually and do a simple JS check. And in the end the user has to confirm. Because some checks gave false positive or negative.

 var isMobile = false; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true; 

Now, if you want to use jQuery to set the CSS, you could do the following:

 $(document).ready(function() { if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css'); }); 

Since the borders between mobile and fixed devices become fluent and mobile browers are already powerful, checking width and user confirmation will probably be the best for the future (assuming that width in some cases will still be important). Because touches are already converted into mouse-ups and downs.

And concerning the mobile movability, I suggest you to think about Yoav Barnea's idea :

 if(typeof window.orientation !== 'undefined'){...}