So bestimmen Sie den Clienttyp in JS

Dieses Mal zeige ich Ihnen, wie Sie den Client-Typ mit JS bestimmen. Welche Vorsichtsmaßnahmen es gibt, um den Client-Typ zu bestimmen, sehen wir uns hier an.

Vorwort

Wenn wir responsives Layout schreiben, müssen wir immer berücksichtigen, ob es sich um einen mobilen Client handelt. Auf dieser Grundlage finden Sie hier 4 Methoden, um festzustellen, ob es sich bei dem Client um iOS oder Android handelt. Teilen Sie es zum Nachschlagen und Studieren für alle. Werfen wir einen Blick auf die ausführliche Einleitung mit dem Herausgeber.

Die Methode ist wie folgt:

1. Die erste: Verwenden Sie regelmäßige Regeln, um festzustellen, ob es sich um einen iOS- oder Android-Client handelt, indem Sie den UserAgent des Browsers beurteilen

Der Benutzeragent wird auf Chinesisch als Benutzeragent bezeichnet. Er ist Teil des HTTP-Protokolls und Bestandteil der Header-Domäne Agent wird auch als UA bezeichnet. Es handelt sich um einen -Sonderzeichen--String-Header, bei dem es sich um eine Kennung handelt, die Browsertyp und -version, Betriebssystem und -version, Browserkernel und andere Informationen bereitstellt, die Sie auf der Website verwenden. Überschreiten Sie diese Marke Beachten Sie, dass die von Benutzern besuchten Websites unterschiedliche Layouts anzeigen können, um Benutzern ein besseres Erlebnis zu bieten oder Informationsstatistiken durchzuführen. Der Zugriff auf Google über ein Mobiltelefon unterscheidet sich beispielsweise vom Zugriff auf einen Computer. UA wird urteilen. UA kann sich tarnen.

Das Standardformat der UA-Zeichenfolge des Browsers: Browser-Identifikation (Betriebssystem-Identifikation; Verschlüsselungsstufen-Identifikation; Browser-Sprache) Rendering-Engine-Identifikationsversionsinformationen. Aber jeder Browser ist anders.

Der Code lautet wie folgt:

<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>

2. Die zweite Methode: Überprüfen Sie, ob es sich um ein Mobiltelefon, ein iPad, ein iPhone, WeChat, QQ usw. handelt.

2.1 Der Code lautet wie folgt:

<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>

2.2 Verwendung von

/判断是否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 Browsersprache erkennen

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

3. Bestimmen Sie iPhone|iPad|iPod|iOS|Android-Client

Der Code lautet wie folgt:

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. Bestimmen Sie die PC- oder Mobilversion

Der Code lautet wie folgt:

<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>

5. Gemeinsame Sprungcodes

Schauen Sie sich den Code an

<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Webpack Bibliotheken von Drittanbietern extrahiert

Schritte zur Implementierung der Entwicklung mehrseitiger Websites mit Webpack+Express

So erstellen Sie eine Vue-Entwicklungsumgebung mit vue-cli+webpack

Das obige ist der detaillierte Inhalt vonSo bestimmen Sie den Clienttyp in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!