English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Posizione attuale
  2. Pagina principale
  3. Note di esperienza
  4. Corpo del testo

Quattro metodi che dovresti sapere per determinare il tipo di client con JS

Prefazione

Quando scriviamo la layout responsive, dobbiamo sempre considerare se è un dispositivo mobile, basato su questo qui ha riassunto 4 metodi per determinare se il client è ios o android. Condividiamo per riferimento e studio, ecco con l'autore per guardare la presentazione dettagliata di seguito.

Il metodo è il seguente:

1. Primo metodo: attraverso la judgment del userAgent del browser, utilizzare l'espressione regolare per determinare se è un client ios o Android

Il User Agent è noto come agente utente in cinese semplificato, è una parte dell'Http protocollo, fa parte della componente dell'intestazione del messaggio. User Agent è anche abbreviato in UA. È una stringa speciale dell'intestazione, che è un identificatore per fornire informazioni come il tipo e la versione del browser utilizzato, il sistema operativo e la versione, il nucleo del browser, ecc. Attraverso questo identificatore, il sito web visitato può visualizzare diverse disposizioni per fornire una migliore esperienza utente o per effettuare statistiche sulle informazioni; ad esempio, l'accesso a Google tramite cellulare e tramite computer è diverso, questi sono determinati da Google in base all'UA dell'utente. L'UA può essere falsificato.

The standard format of the browser's UA string: Browser identifier (Operating system identifier; Encryption level identifier; Browser language) Rendering engine identifier version information. However, different browsers are different.

Il codice è il seguente:

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

2. The second type: check whether it is a mobile terminal (Mobile), ipad, iphone, WeChat, QQ, etc.

2.1 The code is as follows:

<script type="text/javascript">
//Determine the access terminal
var browser={
 versions:function(){
  var u = navigator.userAgent; 
   app = navigator.appVersion;
  return {
   trident: u.indexOf('Trident') > -1, //IE kernel
   presto: u.indexOf('Presto') > -1, //Opera kernel
   webKit: u.indexOf('AppleWebKit') > -1, //Apple, Google kernel
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Firefox kernel
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //Whether it is a mobile terminal
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS terminal
   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>

2.2 使用方法

/判断是否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 检测浏览器语言

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

3. 判断iPhone|iPad|iPod|iOS|Android客户端

Il codice è il seguente:

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)) { //giudizio Android
 //alert(navigator.userAgent); 
 window.location.href ="Android.html";
} else { //pc
 window.location.href ="pc.html";
};

4. Giudizio tra pc e dispositivo mobile

Il codice è il seguente:

<script>
　　//giudizio se si accede tramite dispositivo mobile
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"]
 var ly=document.referrer; //indirizzo dell'URL del sito web che ha navigato alla pagina corrente
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href='http://m.***.com'; //indirizzo per il lato wap
  }
 }
</script>

5. Codice di reindirizzamento comune

Guarda il codice

<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; //indirizzo per la versione wap
  }
 })();
 </script>

Sommario

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo abbia un valore di riferimento per la tua apprendimento o lavoro. Se hai domande, puoi lasciare un messaggio per scambiare opinioni, grazie per il supporto al tutorial di urlaio.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, è di proprietà del rispettivo autore, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato sottoposto a editing umano e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

Manuale di base
Ti potrebbe interessare