Détecter un navigateur mobile

Question

Je suis à la recherche d'une fonction qui retourne la valeur booléenne si l'utilisateur a navigateur mobile ou pas.

Je sais que je peux utiliser navigator.userAgent et écriture de cette fonction en utilisant les regex, mais les user-agents sont trop différentes pour différentes plates-formes. Je doute que le match de tous les périphériques possibles allait être facile, et je pense que ce problème a été résolu avant beaucoup de fois donc il devrait y avoir une sorte de solution complète pour une telle tâche.

Je regardais ce site, mais malheureusement, le script est tellement énigmatique que je n'ai aucune idée de comment l'utiliser pour mon but, qui est de créer une fonction qui retourne true / false.

Answer 1

Fonction à l'aide de la DetectMobileBrowsers.com Méthode

Je suis donc allé à cette question et a décidé de répondre plus enclin à une méthode à l'aide de la http://detectmobilebrowsers.com fonction.

Voici une fonction à l'aide de leur script ( tiré directement à partir de leur site ) et en le retournant une valeur true ou false.

window.mobilecheck = function() {
  var check = false;
  (function(a,b){if(/(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)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}

Espérons que tout le monde qui désire utiliser le http://detectmobilebrowsers.com la méthode de cette manière peut bénéficier de cela aussi.

---

L'Original De La Réplique

Vous pouvez le faire simplement en cours d'exécution à travers une liste de périphériques et de vérifier si le useragent correspond à quelque chose comme ceci:

function detectmob() { 
 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/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}

Cependant, puisque vous croyez que cette méthode n'est pas fiable, on pourrait supposer que n'importe quel appareil qui a une résolution de 800x600 ou moins un appareil mobile aussi, le rétrécissement de votre cible encore plus (bien que ces jours-ci de nombreux appareils mobiles ont de plus en plus de résolutions que c')

j'.e

function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
     return true;
   } else {
     return false;
   }
}

Référence:

• La détection de Navigateur et les Appareils avec javascript

Answer 2

Qu’en est-il :

smartphons généralement prenant en charge cette propriété et les navigateurs de bureau ne

Answer 3

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) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Comment utiliser

if( isMobile.any() ) alert('Mobile');

Pour vérifier si l'utilisateur est sur un périphérique mobile spécifique:

if( isMobile.iOS() ) alert('iOS');

Ref: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript

Version améliorée sur github : https://github.com/smali-kazmi/detect-mobile-browser

Answer 4

La détection des fonctionnalités est beaucoup mieux que d'essayer de comprendre quel appareil vous êtes et très difficile de suivre les nouveaux périphériques qui sortent tout le temps, une bibliothèque comme Modernizr vous permet de savoir si une fonctionnalité particulière est disponible ou non.

Answer 5

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 supporte pas le stockage, j'ai un tableau de noms de navigateurs mobiles et je compare l'agent utilisateur avec les 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
    var 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;
}