Maison > interface Web > js tutoriel > le corps du texte

Quatre façons d'utiliser JS pour déterminer le type de client

小云云
Libérer: 2017-12-23 14:38:50
original
1619 Les gens l'ont consulté

Lorsque nous écrivons une mise en page réactive, nous devons toujours nous demander s'il s'agit d'un client mobile. Sur cette base, voici 4 méthodes pour déterminer si le client est iOS ou Android. Cet article résume et présente principalement quatre méthodes d'utilisation de JS pour déterminer le type de client. Par exemple, en jugeant l'userAgent du navigateur et en vérifiant s'il s'agit d'un terminal mobile (Mobile), ipad, iphone, WeChat, QQ, etc., dont vous avez besoin. Vos amis peuvent s'y référer et espérer que cela pourra aider tout le monde.

La méthode est la suivante :

1. La première : en jugeant le userAgent du navigateur, utiliser des règles régulières pour juger s'il s'agit d'un Client iOS ou Android

User Agent est appelé user agent en chinois. Il fait partie du protocole HTTP et est un composant du champ d'en-tête User Agent est é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, les sites Web visités par les utilisateurs peuvent 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 du. 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('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 alert('是否是Android:'+isAndroid);
 alert('是否是iOS:'+isiOS);
</script>
Copier après la connexion

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('Trident') > -1, //IE内核
   presto: u.indexOf('Presto') > -1, //opera内核
   webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
   android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
   iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
   iPad: u.indexOf('iPad') > -1, //是否iPad
   webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
   weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
   qq: u.match(/\sQQ/i) == " qq" //是否QQ
  };
 }(),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>
Copier après la connexion

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("移动端"); }
Copier après la connexion

2.3 Détecter la langue du navigateur

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

3. Déterminez le code du client

iPhone|iPad|iPod|iOS|Android 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";
};
Copier après la connexion

4. Déterminez le code du client PC ou mobile

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='http://m.***.com'; //wap端地址
  }
 }
</script>
Copier après la connexion

5. Codes de saut couramment utilisés

Regardez le code

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
  var bIsIphone = sUserAgent.match(/iphone os/i) == '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; //wap端地址
  }
 })();
 </script>
Copier après la connexion

Recommandations associées :

Comment utiliser php pour déterminer le type de client

Déterminer le type de client en fonction de php

Déterminer le type de navigateur client

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!