So bestimmen Sie den Clienttyp mithilfe von JS

In diesem Artikel werden hauptsächlich vier Methoden zur Verwendung von JS zur Bestimmung des Clienttyps zusammengefasst und vorgestellt, z. B. die Beurteilung des UserAgent des Browsers und die Überprüfung, ob es sich um ein mobiles Endgerät (Mobile), ein iPad, ein iPhone, WeChat, QQ usw. handelt. Freunde, die es brauchen, können sich unten darauf beziehen.

Vorwort

Wenn wir ein responsives Layout schreiben, müssen wir immer überlegen, ob es aktiviert ist Auf der mobilen Seite gibt es auf dieser Grundlage vier 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:

Die erste: durch Beurteilung des Benutzeragenten von Der Browser verwendet reguläre Regeln, um festzustellen, ob es sich um einen iOS- und Android-Client handelt.

User Agent wird auf Chinesisch User Agent genannt. Er ist Teil des HTTP-Protokolls und eine Komponente der Header-Domäne auch UA genannt. Dabei handelt es sich um einen speziellen String-Header, eine Kennung, die den Browsertyp und die Browserversion, das Betriebssystem und die Browserversion, den Browserkernel und andere von Ihnen verwendete Informationen für die besuchende Website bereitstellt. Durch dieses Logo kann die vom Benutzer besuchte Website unterschiedliche Layouts anzeigen, um Benutzern ein besseres Erlebnis zu bieten oder Informationsstatistiken durchzuführen. Der Zugriff auf Google auf einem Mobiltelefon unterscheidet sich beispielsweise vom Zugriff auf einem Computer die UA des Besuchers. UA kann sich tarnen.

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

Der Code lautet wie folgt:

<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. Der zweite Typ: Überprüfen Sie, ob es sich um ein Mobilgerät, 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(&#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 Verwendung

/判断是否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 PC oder mobiles Endgerät

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=&#39;http://m.***.com&#39;; //wap端地址
  }
 }
</script>

5. Gängige Sprungcodes

Schauen Sie sich den Code an

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Das Problem, dass beforeRouteLeave nicht ausgelöst werden kann, wenn der Browser bei Verwendung von Vue zurückgeht

So lösen Sie das Problem „Punkt im Fastclick-Code „Durch“

So implementieren Sie animierte Kontrollkästchen in anime.js

Gemeinsame Komponenten und Framework-Strukturen in Vue ( ausführliches Tutorial)

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