Vier Methoden, die Sie kennen sollten, um den Cliententyp mit JS zu bestimmen

Inhalt

Vorwort4Beim Schreiben von responsiven Layouts müssen wir immer darüber nachdenken, ob es sich um ein mobiles Gerät handelt, basierend auf dem hier zusammengefasst

Dieser Methode, um zu bestimmen, ob der Client ios oder android ist, zu teilen. Hiermit möchten wir Ihnen eine Referenz und ein Lernmaterial bieten. Lassen Sie uns mit dem Redakteur detailliertes Anleitung betrachten.

1Methoden wie folgt:

. Erster Fall: Durch die Überprüfung des Browsers useragent, mit regulären Ausdrücken zu bestimmen, ob es sich um ein ios- oder Android-Client handelt

Das Standardformat der User-Agent-Zeile des Browsers: Browser-Bezeichnung (Betriebssystem-Bezeichnung; Verschlüsselungsstufen-Bezeichnung; Browser-Sprache) Render-Engine-Bezeichnung Versionsinformation. Aber die verschiedenen Browser unterscheiden sich. Der User Agent heißt auch Benutzeragent und ist ein Teil des HTTP-Protokolls, ein Bestandteil der Kopfzeilen. Der User Agent wird auch kurz UA genannt und ist ein spezieller String-Kopf, der Informationen wie den Typ und die Version des verwendeten Browsers, das Betriebssystem und die Version, den Browserkern usw. an den Besuch der Website liefert. Mit dieser Kennung kann die vom Benutzer besuchte Website verschiedene Anpassungen anzeigen und den Benutzern ein besseres Erlebnis bieten oder Informationen sammeln; zum Beispiel ist es beim Zugriff mit dem Handy auf Google und dem Zugriff mit dem Computer unterschiedlich, das sind die UA, die von Google anhand des Besuchers beurteilt werden. Der UA kann getarnt werden.

Der Code lautet wie folgt:

<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('Ist es Android?');+isAndroid);
 alert('Ist es iOS?');+isiOS);
</script>

2. Zweiter Fall: Überprüfen Sie, ob es sich um ein mobiles Gerät (Mobile), iPad, iPhone, WeChat, QQ usw. handelt.

2.1 Der Code lautet wie folgt:

<script type="text/javascript">
//Gerätetyp bestimmen
var browser={
 versions:function(){
  var u = navigator.userAgent; 
   app = navigator.appVersion;
  return {
   Trident: u.indexOf('Trident') > -1, //IE-Kern
   Presto: u.indexOf('Presto') > -1, //Opera-Kern
   WebKit: u.indexOf('AppleWebKit') > -1, //Apple und Google-Kerne
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Firefox-Kern
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //Ist ein mobiles Terminal
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS-Terminal
   android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //Android-Terminal
   iPhone: u.indexOf('iPhone') > -1 , //Ist iPhone oder QQHD-Browser
   iPad: u.indexOf('iPad') > -1, //Ist iPad
   webApp: u.indexOf('Safari') == -1, //Ist eine Web-App, ohne Kopf und Fuß
   weixin: u.indexOf('MicroMessenger') > -1, //Ist WeChat (2015-01-22Neu)
   qq: u.match(/\sQQ/i) == " qq" //Ist QQ
  };
 }),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

2.2 Verwendung

/Überprüfen Sie, ob es sich um ein IE-Kernel handelt
if(browser.versions.trident){ alert("is IE"); }
//Überprüfen Sie, ob es sich um ein webKit-Kernel handelt
if(browser.versions.webKit){ alert("is webKit"); }
//Überprüfen Sie, ob es sich um ein mobiles Gerät handelt
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("Mobile"); }

2.3 Überprüfen Sie die Browser-Sprache

currentLang = navigator.language; //Überprüfen Sie die Sprachnutzung anderer Browser außer IE
if(!currentLang){//Überprüfen Sie die Sprachnutzung des IE-Browsers
currentLang = navigator.browserLanguage;
}
alert(currentLang);

3. Überprüfen Sie iPhone|iPad|iPod|iOS|Android-Client

Der Code lautet wie folgt:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //Überprüfen Sie iPhone|iPad|iPod|iOS
 //alert(navigator.userAgent); 
 window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) { //Überprüfen Sie Android
 //alert(navigator.userAgent); 
 window.location.href ="Android.html";
} else { //pc
 window.location.href ="pc.html";
};

4. Überprüfen Sie, ob es sich um einen PC oder ein mobiles Gerät handelt

Der Code lautet wie folgt:

<script>
　　//Überprüfen Sie, ob es sich um einen mobilen Zugriff handelt
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //Rückgabe der URL der Webseite, auf der sich der Hyperlink zur aktuellen Webseite befindet
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0 && (ly=="" || ly==null)) {
   this.location.href='http://m.***.com'; //Mobiles Endgerät URL
  }
 }
</script>

5. Häufig verwendeter Umleitungscode

Sehen Sie den Code

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  
  var bIsIpad = sUserAgent.match(/ipad/
  var bIsIphone = sUserAgent.match(/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; //Mobiles Endgerät URL
  }
 })();
 </script>

Zusammenfassung

Dies ist der vollständige Inhalt dieses Artikels. Wir hoffen, dass dieser Artikel für Ihre Lern- oder Arbeitsaktivitäten一定的 Referenzwert hat. Wenn Sie Fragen haben, können Sie gerne Kommentare hinterlassen und danken wir Ihnen für Ihre Unterstützung für die Anleitung 'Ruf zum Handeln'.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig bereitgestellt und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig bereitgestellt und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.