Comment déterminer le type de client à l'aide de JS

Cet article résume et présente principalement quatre méthodes d'utilisation de JS pour déterminer le type de client, comme juger l'userAgent du navigateur, vérifier s'il s'agit d'un terminal mobile (Mobile), iPad, iPhone, WeChat, QQ, etc. Les amis dans le besoin peuvent se référer à la méthode ci-dessous

Avant-propos

Lorsque nous écrivons une mise en page réactive, nous devons toujours nous demander si elle est activée. côté mobile, sur cette base, voici quatre méthodes pour déterminer si le client est iOS ou Android. Partagez-le pour référence et étude par tous. Jetons un coup d'œil à l'introduction détaillée avec l'éditeur.

La méthode est la suivante :

1. le navigateur, utilisez les règles régulières pour déterminer s'il s'agit d'un client iOS et Android.

L'agent utilisateur est appelé agent utilisateur en chinois. Il fait partie du protocole Http et est un composant du domaine d'en-tête. également appelé UA. Il s'agit d'un en-tête de chaîne spécial, un identifiant qui fournit le type et la version du navigateur, le système d'exploitation et la version, le noyau du navigateur et d'autres informations que vous utilisez sur le site Web en visite. Grâce à ce logo, le site Web visité par l'utilisateur peut afficher différentes présentations pour offrir aux utilisateurs une meilleure expérience ou réaliser des statistiques d'informations ; par exemple, l'accès à Google sur un téléphone mobile est différent de l'accès à un ordinateur. Celles-ci sont déterminées par Google en fonction. l'UA du visiteur de. UA peut se déguiser.

Le format standard de la chaîne UA du navigateur : identification du navigateur (identification du système d'exploitation ; identification du niveau de cryptage ; langue du navigateur) rendant les informations de version d'identification du moteur. Mais chaque navigateur est différent.

Le code est le suivant :

<script type="text/javascript">
 var u = navigator.userAgent;
 var isAndroid = u.indexOf(&#39;Android&#39;) > -1 || u.indexOf(&#39;Adr&#39;) > -1; //android终端
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 alert(&#39;是否是Android：&#39;+isAndroid);
 alert(&#39;是否是iOS：&#39;+isiOS);
</script>

2 Le deuxième type : vérifiez s'il s'agit d'un mobile, d'un iPad, d'un iPhone, de WeChat, de QQ, etc.

2.1 Le code est le suivant :

<script type="text/javascript">
//判断访问终端
var browser={
 versions:function(){
  var u = navigator.userAgent, 
   app = navigator.appVersion;
  return {
   trident: u.indexOf(&#39;Trident&#39;) > -1, //IE内核
   presto: u.indexOf(&#39;Presto&#39;) > -1, //opera内核
   webKit: u.indexOf(&#39;AppleWebKit&#39;) > -1, //苹果、谷歌内核
   gecko: u.indexOf(&#39;Gecko&#39;) > -1 && u.indexOf(&#39;KHTML&#39;) == -1,//火狐内核
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
   android: u.indexOf(&#39;Android&#39;) > -1 || u.indexOf(&#39;Adr&#39;) > -1, //android终端
   iPhone: u.indexOf(&#39;iPhone&#39;) > -1 , //是否为iPhone或者QQHD浏览器
   iPad: u.indexOf(&#39;iPad&#39;) > -1, //是否iPad
   webApp: u.indexOf(&#39;Safari&#39;) == -1, //是否web应该程序，没有头部与底部
   weixin: u.indexOf(&#39;MicroMessenger&#39;) > -1, //是否微信 （2015-01-22新增）
   qq: u.match(/\sQQ/i) == " qq" //是否QQ
  };
 }(),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

2.2 Comment utiliser

/判断是否IE内核
if(browser.versions.trident){ alert("is IE"); }
//判断是否webKit内核
if(browser.versions.webKit){ alert("is webKit"); }
//判断是否移动端
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); }

2.3 Détecter la langue du navigateur

currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
alert(currentLang);

3. Déterminer le client iPhone|iPad|iPod|iOS|Android

Le code est le suivant :

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

4. Déterminer la version PC ou mobile

Le code est le suivant :

<script>
　　//判断是否手机端访问
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //返回导航到当前网页的超链接所在网页的URL
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href=&#39;http://m.***.com&#39;; //wap端地址
  }
 }
</script>

5. codes

Regardez le code

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == &#39;ipad&#39;;
  var bIsIphone = sUserAgent.match(/iphone os/i) == &#39;iphone os&#39;;
  var bIsMidp = sUserAgent.match(/midp/i) == &#39;midp&#39;;
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == &#39;rv:1.2.3.4&#39;;
  var bIsUc = sUserAgent.match(/ucweb/i) == &#39;web&#39;;
  var bIsCE = sUserAgent.match(/windows ce/i) == &#39;windows ce&#39;;
  var bIsWM = sUserAgent.match(/windows mobile/i) == &#39;windows mobile&#39;;
  var bIsAndroid = sUserAgent.match(/android/i) == &#39;android&#39;;
  var pathname = location.pathname
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = &#39;http://m.geekjc.com&#39;+pathname; //wap端地址
  }
 })();
 </script>

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

Articles associés :

Le problème qui beforeRouteLeave ne peut pas être déclenché lorsque le navigateur revient en arrière lors de l'utilisation de Vue

Comment résoudre le tap "pointez dans le code fastclick "Through"

Comment implémenter des cases à cocher animées dans anime.js

Composants communs et structures de framework dans vue ( tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!