Les quatre méthodes que vous devriez connaître pour déterminer le type de client avec JavaScript

Préambule

Lorsque nous écrivons un layout responsive, nous devons toujours considérer si c'est un terminal mobile, en fonction de cela, nous avons résumé4Cette méthode pour déterminer si le client est ios ou android. Partageons-le pour que chacun puisse l'apprendre et l'utiliser. Voici une introduction détaillée avec l'auteur.

Voici la méthode :

1. Première méthode : en vérifiant l'userAgent du navigateur, utiliser des expressions régulières pour déterminer s'il s'agit d'un client ios ou Android

L'User Agent, en chinois, est le proxy utilisateur, qui fait partie de Http protocole, appartenant à la composante de l'en-tête. User Agent est également abrégé en UA. Il s'agit d'une chaîne d'en-tête spéciale, qui est un identifiant fournissant aux sites Web les types et les versions de navigateurs que vous utilisez, les versions des systèmes d'exploitation, les moteurs de navigateur, etc. Grâce à cet identifiant, les sites Web visités peuvent afficher différentes compositions pour offrir une meilleure expérience aux utilisateurs ou pour effectuer des statistiques d'information; par exemple, accéder à Google depuis un téléphone et depuis un ordinateur est différent, ce sont des Google qui déterminent cela en fonction de l'UA de l'accès. L'UA peut être camouflé.

Le format standard de la chaîne d'UA du navigateur : identifiant du navigateur (identifiant du système d'exploitation; identifiant du niveau de cryptage; langue du navigateur) identifiant du moteur de rendu version informations. Mais les navigateurs diffèrent les uns des autres.

Code suivant:

<script type="text/javascript">
 var u = navigator.userAgent;
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Terminaux Android
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //Terminaux iOS
 alert('Est-ce Android : ')+isAndroid);
 alert('Est-ce iOS : ')+isiOS);
</script>

2. Deuxième méthode : vérifier si c'est un terminal mobile (Mobile), ipad, iphone, WeChat, QQ, etc.

2.1 Code suivant:

<script type="text/javascript">
//déterminer le terminal d'accès
var browser={
 versions:function(){
  var u = navigator.userAgent; 
   app = navigator.appVersion;
  return {
   trident: u.indexOf('Trident') > -1, //noyau IE
   presto: u.indexOf('Presto') > -1, //noyau opera
   webkit: u.indexOf('AppleWebKit') > -1, //Moteurs Apple et Google
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Noyau Firefox
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //Est-ce un terminal mobile
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //Terminaux iOS
   android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //Terminaux Android
   iPhone: u.indexOf('iPhone') > -1 , //Est-ce iPhone ou navigateur QQHD
   iPad: u.indexOf('iPad') > -1, //Est-ce iPad
   webApp: u.indexOf('Safari') == -1, //Est-ce une application web sans en-tête et pied de page
   weixin: u.indexOf('MicroMessenger') > -1, //Est-ce WeChat (2015-01-22Nouveau)
   qq: u.match(/\sQQ/i) == " qq" //Est-ce QQ
  };
 },
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

2.2 Méthode d'utilisation

/Déterminer si c'est un noyau IE
if(browser.versions.trident){ alert("is IE"); }
//Déterminer si c'est un noyau webKit
if(browser.versions.webKit){ alert("is webKit"); }
//Déterminer si c'est un terminal mobile
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("Terminale mobile"); }

2.3 Détection de la langue du navigateur

currentLang = navigator.language; //Déterminer la langue utilisée par les navigateurs autres que IE
if(!currentLang){//Déterminer la langue utilisée par le navigateur IE
currentLang = navigator.browserLanguage;
}
alert(currentLang);

3. Déterminer les clients iPhone|iPad|iPod|iOS|Android

Code suivant:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //Déterminer iPhone|iPad|iPod|iOS
 //alert(navigator.userAgent); 
 window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) { //Déterminer Android
 //alert(navigator.userAgent); 
 window.location.href ="Android.html";
} else { //pc
 window.location.href ="pc.html";
};

4. Déterminer si c'est un PC ou un mobile

Code suivant:

<script>
　　//Déterminer si l'accès est depuis un mobile
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //Retourner l'URL du site web contenant le lien vers la page actuelle
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href='http://m.***.com'; //adresse en version mobile
  }
 }
</script>

5. Code de redirection commun

Voir le code

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  
  var bIsIpad = sUserAgent.match(/ipad/
  var bIsIphone = sUserAgent.match(/iphone os/
  var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
  var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
  var pathname = location.pathname
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = 'http://m.geekjc.com'+pathname; //adresse en version mobile
  }
 })();
 </script>

Résumé

Voici la totalité du contenu de cet article, j'espère que le contenu de cet article a une certaine valeur de référence pour votre apprentissage ou votre travail, vous pouvez laisser des commentaires pour échanger si vous avez des doutes, merci de votre soutien à la tutelle d'alarme.

Déclaration : Le contenu de cet article est extrait du réseau, la propriété intellectuelle appartient à ses auteurs respectifs, le contenu est contribué et téléchargé par les utilisateurs d'Internet, ce site n'a pas de propriété, n'a pas été édité par l'homme, et n'assume pas la responsabilité juridique. Si vous trouvez du contenu présumé enfreindre les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.)