Quel est le meilleur moyen de détecter un appareil mobile dans jQuery?
Existe-t-il un moyen solide de détecter si un utilisateur utilise ou non un appareil mobile dans jQuery? Quelque chose de semblable à l'attribut CSS @media? J'aimerais exécuter un script différent si le navigateur est sur un périphérique de poche.
La fonction jQuery $.browser n’est pas ce que je recherche.
Au lieu d'utiliser jQuery, vous pouvez utiliser du simple JavaScript pour le détecter:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
Ou vous pouvez combiner 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 plugin de migration jQuery Code
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|\-[a-w])|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, petit est beau, j'utilise cette technique:
En fichier CSS:
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}
Dans un 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 friendly". J'utilise donc CSS Media Queries pour afficher/masquer des éléments en fonction de la taille de l'écran.
Par exemple, dans ma version mobile, je ne souhaite pas activer la Facebook Like Box, car elle charge toutes ces images de profil et autres éléments. Et ce n'est pas bon pour les visiteurs mobiles. Donc, en plus de cacher l'élément conteneur, je le fais également 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 sur http://lisboaautentica.com
Je travaille toujours sur la version mobile, donc ça ne ressemble toujours pas à ce qu'il devrait être, au moment d'écrire cela.
Mise à jour par dekin88
Il existe une API JavaScript intégrée pour la détection de média . Au lieu d'utiliser la solution ci-dessus, utilisez simplement les éléments suivants:
$( document ).ready(function() {
var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
Supports de navigateur:http://caniuse.com/#feat=matchmedia
L’avantage de cette méthode est qu’elle est non seulement plus simple et plus courte, mais que vous pouvez également cibler séparément différents périphériques tels que les smartphones et les tablettes, sans avoir à ajouter d’éléments factices dans le DOM.
Selon Mozilla - Détection de navigateur utilisant l’agent d’utilisateur }:
En résumé, nous vous recommandons de rechercher la chaîne «Mobi» n'importe où dans l'agent d'utilisateur pour détecter un appareil mobile.
Comme ça:
if (/Mobi/.test(navigator.userAgent)) {
// mobile!
}
Cela correspond à tous les agents d’utilisation des navigateurs mobiles courants, notamment Mozilla, Safari, IE, Opera, Chrome, etc.
Mise à jour pour Android
EricL recommande également de tester Android en tant qu'agent utilisateur, car la chaîne de l'agent utilisateur Chrome pour les tablettes n'inclut pas "Mobi" (les versions de téléphone incluent toutefois):
if (/Mobi|Android/i.test(navigator.userAgent)) {
// mobile!
}
Un one-liner simple et efficace:
function isMobile() { return ('ontouchstart' in document.documentElement); }
Cependant, le code ci-dessus ne prend pas en compte le cas des ordinateurs portables avec écran tactile . Ainsi, je fournis cette deuxième version, basée sur @Julian solution :
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
Ce que vous faites en voulant détecter un appareil mobile, c'est s'approcher un peu trop du concept de "navigateur renifleur" IMO. Il serait probablement préférable de faire une détection de fonctionnalités. Des bibliothèques comme http://www.modernizr.com/ peuvent vous aider.
Par exemple, où se situe la ligne de démarcation entre mobile et non-mobile? Il devient de plus en plus flou chaque jour.
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 JavaScript. Cela peut vous aider avec ce que vous recherchez.
Cependant, puisque vous utilisez jQuery, vous souhaiterez peut-être connaître la collection jQuery.support. C'est un ensemble de propriétés permettant de détecter les capacités du navigateur actuel. La documentation est ici: http://api.jquery.com/jQuery.support/
Puisque je ne sais pas ce que vous essayez exactement d'accomplir, je ne sais pas lequel de ces éléments sera le plus utile.
Cela dit, je pense que votre meilleur choix est de rediriger ou d'écrire un script différent dans la sortie en utilisant un langage côté serveur (si c'est une option). Étant donné que vous ne connaissez pas vraiment les capacités d'un navigateur mobile x, la méthode la plus fiable consiste à détecter et à modifier la logique de modification du côté serveur. Bien sûr, tout cela est discutable si vous ne pouvez pas utiliser un langage côté serveur :)
Parfois, il est souhaitable de connaître le périphérique utilisé par un client pour afficher le contenu spécifique à ce périphérique, par exemple un lien vers le magasin iPhone ou le marché Android. Modernizer est formidable, mais ne montre que les capacités de votre 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/
Solution trouvée 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 ensuite, 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 obtiendrez une window.screen.width de 320. Sur Android, vous obtiendrez une window.outerWidth de 480 (bien que cela puisse dépendre d'Android). Les iPad et les tablettes Android renverront des numéros tels que 768 afin d'obtenir 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.
Toutefois, je préfère utiliser une combinaison de tests Modernizr.touch et d’agent d’utilisateur, pour plus de sécurité.
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 fait de tester l'agent utilisateur iemobile vous donnera une gamme plus étendue de périphériques mobiles Microsoft détectés que Windows Phone.
Je sais que cette question a beaucoup de réponses, mais d'après ce que j'ai vu, personne ne l'aborde de la façon dont je résoudrais ceci.
CSS utilise width (Requêtes multimédia) pour déterminer les styles appliqués au document Web en fonction de la largeur. Pourquoi ne pas utiliser la largeur dans le JavaScript?
Par exemple, dans les requêtes multimédia de Bootstrap (Mobile First), il existe 4 points d'accrochage/coupure:
- Les très petits appareils mesurent 768 pixels ou moins.
- Les petits appareils vont de 768 à 991 pixels.
- Les appareils moyens vont de 992 à 1199 pixels.
- Les grands appareils mesurent 1200 pixels et plus.
Nous pouvons utiliser cela pour résoudre également notre problème JavaScript.
Nous allons d’abord créer une fonction qui récupère la taille de la fenêtre et renvoie une valeur nous permettant de voir quelle taille de périphérique affiche 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 la fonction est configurée, nous pouvons l’appeler et stocker la valeur:
var device = getBrowserWidth();
Votre question était
J'aimerais exécuter un script différent si le navigateur est sur un périphérique de poche.
Maintenant que nous avons les informations sur l'appareil, il ne reste plus qu'une instruction if:
if(device === "xs"){
// Enter your script for handheld devices here
}
Voici un exemple sur CodePen: http://codepen.io/jacob-king/pen/jWEeWG
Vous ne pouvez pas compter sur navigator.userAgent, chaque appareil ne révèle pas son véritable système d'exploitation. Sur mon HTC par exemple, cela dépend des paramètres ("utiliser la version mobile" activé/désactivé) . On http://my.clockodo.com , nous avons simplement utilisé screen.width pour détecter les petits appareils. Malheureusement, dans certaines versions Android, il y a un bug avec screen.width. Vous pouvez combiner cette méthode avec userAgent:
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");
}
Je suis surpris que personne n'ait signalé un site de Nice: http://detectmobilebrowsers.com/ / Il dispose d'un code prêt à l'emploi dans différentes langues pour la détection mobile (notamment, mais sans s'y limiter):
- Apache
- ASP
- C #
- IIS
- JavaScript
- NGINX
- PHP
- Perl
- Python
- Des rails
Et si vous avez également besoin de détecter les tablettes, consultez la section À propos pour connaître le paramètre RegEx supplémentaire.
Les tablettes Android, iPads, Kindle Fires et PlayBooks ne sont pas détectés par conception. Pour ajouter le support pour les tablettes, ajoutez
|Android|ipad|playbook|silkà la première regex.
Si vous n'êtes pas particulièrement préoccupé par les petits écrans, vous pouvez utiliser la détection de largeur/hauteur. Ainsi, si la largeur est inférieure à une certaine taille, le site mobile est affiché. Ce n'est peut-être pas la solution idéale, mais ce sera probablement le plus facile à détecter pour plusieurs périphériques. Vous devrez peut-être en installer un spécifique pour l'iPhone 4 (grande résolution).
Dans une ligne de javascript:
var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
Si l'agent utilisateur contient «Mobi» (selon MDN) et que ontouchstart est disponible, il s'agit probablement d'un périphérique mobile.
Je vous conseille de vérifier http://wurfl.io/
En un mot, si vous importez un petit fichier JavaScript:
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
Vous resterez avec 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.
Disclaimer: Je travaille pour l'entreprise qui propose ce service gratuit.
Pour ajouter une couche de contrôle supplémentaire, j'utilise le stockage HTML5 pour détecter s'il utilise un stockage mobile ou un stockage de bureau. Si le navigateur ne prend pas en charge le stockage, j'ai un tableau de noms de navigateurs mobiles et je compare l'agent utilisateur aux navigateurs du tableau.
C'est assez simple. Voici la fonction:
// 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','tablet','mobi'];
var ua=navigator.userAgent.toLowerCase();
for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;
// nothing found.. assume desktop
return false;
}
Voici une fonction que vous pouvez utiliser pour obtenir une réponse vraie/fausse indiquant si vous utilisez un navigateur mobile. Oui, c'est une recherche de 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;
}
Je suggérerais d'utiliser le combo suivant de chaînes pour vérifier si le type de périphérique est utilisé.
Selon La documentation de Mozilla string Mobi est recommandé. Cependant, certaines des anciennes tablettes ne renvoient pas la valeur true si seulement Mobi est utilisé, nous devrions donc également utiliser la chaîne Tablet.
De même, les chaînes iPad et iPhone peuvent également être utilisées pour vérifier le type de périphérique.
La plupart des nouveaux périphériques renverraient true pour la chaîne Mobi uniquement.
if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
// do something
}
Découvrez ce post , il donne un très bon extrait de code indiquant ce qu’il faut faire lorsque des périphériques tactiles sont détectés ou quoi faire si un événement touchstart est appelé:
$(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();
}
Sachant que TouchEvent concerne uniquement les appareils mobiles, le moyen le plus simple pourrait être de vérifier si l'appareil utilisateur peut le prendre en charge:
function isMobile() {
try {
document.createEvent("TouchEvent");
return true;
}
catch(e) {
return false;
}
}
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|\-[a-w])|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));
}
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\/|\-[a-w])|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);
Alors utilisez ceci:
if(jQuery.browser.mobile)
{
console.log('You are using a mobile device!');
}
else
{
console.log('You are not using a mobile device!');
}
Toutes les réponses utilisent user-agent pour détecter le navigateur mais la détection de périphérique basée sur user-agent n’est pas une très bonne solution; mieux vaut détecter des fonctionnalités telles que le périphérique tactile (dans le nouveau jQuery, ils suppriment $.browser et utilisent plutôt $.support).
Pour détecter mobile, vous pouvez vérifier les événements tactiles:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
}
Tiré de Quel est le meilleur moyen de détecter un périphérique à écran tactile à l'aide de JavaScript?
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";
}
<script>
function checkIsMobile(){
if(navigator.userAgent.indexOf("Mobile") > 0){
return true;
}else{
return false;
}
}
</script>
Si vous avez un navigateur et si vous essayez d’obtenir navigator.userAgent, nous obtiendrons les informations du navigateur comme suit:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/64.0.3282.186 Safari/537.36
La même chose si vous le faites dans le mobile, vous serez suivi
Mozilla/5.0 (Linux; Android 8.1.0; Pixel Build/OPP6.171019.012) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/61.0.3163.98 Mobile Safari/537.36
Chaque navigateur mobile aura useragent avec une chaîne contenant "Mobile" J'utilise donc l'extrait de code ci-dessus dans mon code pour vérifier si l'agent utilisateur actuel est Web/mobile. Sur la base du résultat, je ferai les changements nécessaires.
Si trouvé, vérifier navigator.userAgent n'est pas toujours fiable. Une plus grande fiabilité peut être obtenue en vérifiant également navigator.platform. Une simple modification d'une réponse précédente semble mieux fonctionner:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
// some code...
}
Vous pouvez utiliser la requête multimédia pour pouvoir le gérer facilement.
isMobile = function(){
var isMobile = window.matchMedia("only screen and (max-width: 760px)");
return isMobile.matches ? true : false
}
Les chaînes d'agent d'utilisateur ne doivent pas être approuvées seules. La solution ci-dessous fonctionnera dans toutes les 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|\-[a-w])|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)));
}
et appelez cette fonction:
isMobile(navigator.userAgent || navigator.vendor || window.opera)
C'est mon code que j'utilise dans mes projets:
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; }
}
Que diriez-vous de mobiledetect.net ?
D'autres solutions semblent trop basiques. C'est une classe PHP légère. Il utilise la chaîne User-Agent combinée à des en-têtes HTTP spécifiques pour détecter l'environnement mobile. Vous pouvez également bénéficier de Mobile Detect en utilisant l'un des plug-ins tiers disponibles pour: WordPress, Drupal, Joomla, Magento, etc.
Vous pouvez aussi le détecter comme ci-dessous
$.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"));
};
Vous pouvez également utiliser un script côté serveur et définir des variables javascript à partir de celui-ci.
Exemple en php
télécharger http://code.google.com/p/php-mobile-detect/ puis définissez des variables javascript.
<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>
Je l'utilise
if(navigator.userAgent.search("mobile")>0 ){
do something here
}
J'ai essayé certaines des manières puis j'ai décidé de remplir une liste manuellement et de faire une simple vérification JS. Et à la fin, l'utilisateur doit confirmer. Parce que certaines vérifications ont donné de faux positifs ou négatifs.
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;
Maintenant, si vous souhaitez utiliser jQuery pour définir le CSS, vous pouvez procéder comme suit:
$(document).ready(function() {
if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});
Étant donné que les frontières entre les appareils mobiles et fixes deviennent fluides et que les ventilateurs mobiles sont déjà puissants, il sera probablement préférable de vérifier la largeur et de confirmer l'utilisateur, pour le futur (en supposant que cette largeur reste importante dans certains cas). Parce que les touches sont déjà converties en souris-up et downs.
Et concernant la mobilité du mobile, je vous suggère de réfléchir à l'idée de l'idée de Yoav Barnea :
if(typeof window.orientation !== 'undefined'){...}
Checkout http://detectmobilebrowsers.com/ qui fournit un script permettant de détecter un appareil mobile dans diverses langues, notamment
JavaScript, jQuery, PHP, JSP, Perl, Python, ASP, C #, ColdFusion et bien d'autres
Aussi, je recommande d'utiliser la petite bibliothèque JavaScript Bowser, oui non r. Il est basé sur le navigator.userAgent et très bien testé pour tous les navigateurs, y compris iPhone, Android, etc.
Vous pouvez utiliser simplement dire:
if (bowser.msie && bowser.version <= 6) {
alert('Hello China');
} else if (bowser.firefox){
alert('Hello Foxy');
} else if (bowser.chrome){
alert('Hello Silicon Valley');
} else if (bowser.safari){
alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.Android){
alert('Hello mobile');
}
function isDeviceMobile(){
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/mobile|Mobile/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/BB10; Touch/);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/webOS/i) ;
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
return isMobile.any()
}
Voici une autre suggestion implémentée avec JavaScript pur (es6)
const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
? 'Mobile'
: 'Desktop';
detectDeviceType();
var device = {
detect: function(key) {
if(this['_'+key] === undefined) {
this['_'+key] = navigator.userAgent.match(new RegExp(key, 'i'));
}
return this['_'+key];
},
iDevice: function() {
return this.detect('iPhone') || this.detect('iPod');
},
Android: function() {
return this.detect('Android');
},
webOS: function() {
return this.detect('webOS');
},
mobile: function() {
return this.iDevice() || this.Android() || this.webOS();
}
};
J'ai utilisé quelque chose comme ça dans le passé. Ceci est similaire à une réponse précédente, mais il est techniquement plus performant dans la mesure où il met en cache le résultat de la correspondance, en particulier si la détection est utilisée dans une animation, un événement de défilement ou similaire.
Ajouter:
Dans certaines versions de iOS 9.x , Safari ne présente pas "l'iPhone" dans navigator.userAgent, mais l'affiche dans navigator.platform.
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
if(!isMobile){
isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
}
Cela semble être une solution complète et moderne:
https://github.com/matthewhudson/device.js
Il détecte plusieurs plates-formes, smartphone par rapport aux tablettes et orientation. Il ajoute également des classes à la balise BODY afin que la détection n'ait lieu qu'une seule fois et que vous puissiez savoir sur quel appareil vous vous trouvez avec une simple série de fonctions jQuery hasClass.
Vérifiez-le...
[AVERTISSEMENT: Je n'ai rien à voir avec la personne qui l'a écrit.]
Si vous comprenez un appareil tactile par un appareil mobile, vous pouvez le déterminer en vérifiant l'existence de gestionnaires de contact:
let deviceType = (('ontouchstart' in window)
|| (navigator.maxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0)
) ? 'touchable' : 'desktop';
jQuery n'est pas nécessaire pour cela.
Je connais cette vieille question et il y a beaucoup de réponses, mais je pense que cette fonction est simple et aidera à détecter tous les navigateurs pour mobiles, tablettes et ordinateurs, cela fonctionne à merveille.
function Device_Type()
{
var Return_Device;
if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|Android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|Java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|Palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent))
{
if(/(tablet|ipad|playbook)|(Android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent))
{
Return_Device = 'Tablet';
}
else
{
Return_Device = 'Mobile';
}
}
else if(/(tablet|ipad|playbook)|(Android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent))
{
Return_Device = 'Tablet';
}
else
{
Return_Device = 'Desktop';
}
return Return_Device;
}
http://www.w3schools.com/jsref/prop_nav_useragent.asp
Filtrer par nom de plateforme.
Ex:
x = $( window ).width();
platform = navigator.platform;
alert(platform);
if ( (platform != Ipad) || (x < 768) ) {
}
^^
Brut, mais suffisant pour limiter le chargement de ressources plus volumineuses telles que les fichiers vidéo sur les téléphones, par rapport aux tablettes/ordinateurs de bureau - il suffit de rechercher une largeur ou une hauteur réduite pour couvrir les deux orientations. De toute évidence, si le navigateur du bureau a été redimensionné, la procédure ci-dessous peut détecter par erreur un téléphone, mais cela convient assez bien/assez près pour mon cas d'utilisation.
Pourquoi 480, c'est ce qui semble bien se baser sur les informations que j'ai trouvées concernant les dimensions de l'appareil téléphonique.
if(document.body.clientWidth < 480 || document.body.clientHeight < 480) {
//this is a mobile device
}
En fonction de ce que vous voulez détecter pour mobile (ce qui signifie que cette suggestion ne conviendra pas à tous les besoins), vous pourrez peut-être faire une distinction en regardant la différence en millisecondes onmouseenter to onclick, comme je l’ai décrit dans cette réponse .
Ce sont toutes les valeurs dont je suis conscient. S'il vous plaît aider à mettre à jour le tableau si vous connaissez d'autres valeurs.
function ismobile(){
if(/Android|webos|iphone|ipad|iPod|blackberry|opera mini|Windows Phone|iemobile|WPDesktop|XBLWP7/i.test(navigator.userAgent.toLowerCase())) {
return true;
}
else
return false;
}
Je le fais pour mes applications .NET.
Dans ma page _Layout.cshtml partagée, j'ajoute ceci.
@{
var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}
<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">
Ensuite, pour vérifier n'importe quelle page de votre site (jQuery):
<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>