Four Methods You Should Know for Client Type Detection Using JavaScript

Preface

When we write responsive layouts, we always have to consider whether it is a mobile terminal, based on which we summarize4This method determines whether the client is ios or android. Share it for everyone to learn from, and let's take a detailed look with the editor below.

The method is as follows:

1. The first method: determine whether it is an ios and Android client by judging the browser's userAgent, using regular expressions

The Chinese name of User Agent is user agent, which is part of the Http protocol and belongs to the part of the header. User Agent is also abbreviated as UA. It is a special string header that is a kind of identification that provides information such as the type and version of the browser, the operating system and version, browser kernel, etc. to the visited website. Through this identification, the visited website can display different layouts and provide better experiences for users or perform information statistics; for example, visiting Google with a mobile phone and visiting with a computer is different, and these are determined by Google according to the visitor's UA. UA can be disguised.

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

Code as follows:

<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 it Android:');+isAndroid);
 alert('Is it iOS:');+isiOS);
</script>

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

2.1 Code 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 and Google cores
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Firefox core
   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 terminal
   iPhone: u.indexOf('iPhone') > -1 , //Whether it is an iPhone or QQHD browser
   iPad: u.indexOf('iPad') > -1, //Whether it is an iPad
   webApp: u.indexOf('Safari') == -1, //Whether it is a web app without header and footer
   weixin: u.indexOf('MicroMessenger') > -1, //Whether WeChat (2015-01-22Newly added)
   qq: u.match(/\sQQ/i) == " qq" //Whether QQ
  };
 }),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

2.2 Usage method

/Judgment of whether it is an IE core
if(browser.versions.trident){ alert("is IE"); }
//Judgment of whether it is a webKit core
if(browser.versions.webKit){ alert("is webKit"); }
//Judgment of whether it is a mobile terminal
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("Mobile"); }

2.3 Detection of browser language

currentLang = navigator.language; //Judgment of language used by other browsers except IE
if(!currentLang){//Judgment of IE browser language
currentLang = navigator.browserLanguage;
}
alert(currentLang);

3Judgment of iPhone|iPad|iPod|iOS|Android client

Code as follows:

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

4. Determine PC or mobile terminal

Code as follows:

<script>
　　//Determine if accessed from a mobile device
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //Return the URL of the web page where the hyperlink to navigate to the current web page is located
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href='http://m.***.com'; //WAP address
  }
 }
</script>

5. Common redirect code

View 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; //WAP address
  }
 })();
 </script>

Summary

That's all for this article. I hope the content of this article is of certain reference value to everyone's learning or work. If you have any questions, you can leave a message for communication. Thank you for your support of the yells tutorial.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)