Heim > Web-Frontend > js-Tutorial > Hauptteil

Vier Möglichkeiten, JS zur Bestimmung des Clienttyps zu verwenden

小云云
Freigeben: 2017-12-23 14:38:50
Original
1638 Leute haben es durchsucht

Wenn wir ein responsives Layout schreiben, müssen wir immer berücksichtigen, ob es sich um einen mobilen Client handelt. Auf dieser Grundlage finden Sie hier vier Methoden, um festzustellen, ob es sich bei dem Client um iOS oder Android handelt. In diesem Artikel werden hauptsächlich vier Methoden zur Verwendung von JS zur Bestimmung des Clienttyps zusammengefasst und vorgestellt, indem beispielsweise der UserAgent des Browsers beurteilt und überprüft wird, ob es sich um ein mobiles Endgerät (Mobile), ein iPad, ein iPhone, WeChat, QQ usw. handelt. Sie brauchen Freunde können darauf verweisen und hoffen, dass es allen helfen kann.

Die Methode ist wie folgt:

1: Beurteilen Sie mithilfe regelmäßiger Regeln, ob es sich um einen UserAgent des Browsers handelt ios oder Android-Client

User Agent wird auf Chinesisch User Agent genannt. Er ist Teil des HTTP-Protokolls und wird auch als UA bezeichnet. 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üsselungsebene; Browser-Sprache) zur Wiedergabe von Versionsinformationen zur Engine-Identifikation. 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>
Nach dem Login kopieren

2. Der zweite Typ: Ü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>
Nach dem Login kopieren

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("移动端"); }
Nach dem Login kopieren

2.3 Browsersprache erkennen

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

3. Bestimmen Sie das iPhone|. Der Code für den iPad|iPod|iOS|Android-Client lautet wie folgt:

4. Bestimmen Sie die PC- oder Mobilversion
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";
};
Nach dem Login kopieren

🎜>

5. Häufig verwendete Sprungcodes

<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>
Nach dem Login kopieren
Schauen Sie sich den Code an

Verwandte Empfehlungen:

<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>
Nach dem Login kopieren

So verwenden Sie PHP Bestimmen Sie den Typ des Clients

Bestimmen Sie den Client-Typ basierend auf PHP

Bestimmen Sie den Client-Browsertyp

Das obige ist der detaillierte Inhalt vonVier Möglichkeiten, JS zur Bestimmung des Clienttyps zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage