How to determine client type in JS

This time I will show you how to determine the client type with JS. What are the precautions for JS to determine the client type. Here are practical cases, let’s take a look.

Preface

When we write responsive layout, we always have to consider whether it is a mobile client. Based on this, here are four methods to determine whether the client is ios or android. Share it for everyone’s reference and study. Let’s take a look at the detailed introduction with the editor.

Methods as below:

1. The first one: Use regular rules to determine whether it is an ios or Android client by judging the userAgent of the browser

User Agent is called user agent in Chinese. It is part of the HTTP protocol and is a component of the header domain. User Agent is also referred to as UA. It is a special character string header, which is an identifier that provides the browser type and version, operating system and version, browser kernel, and other information you are using to the website you are visiting. Pass this mark Understand that the websites visited by users can display different layouts to provide users with a better experience or conduct information statistics; for example, accessing Google on a mobile phone is different from accessing on a computer. UA will judge. UA can disguise itself.

The standard format of the browser's UA string: browser identification (operating system identification; encryption level identification; browser language) rendering engine identification version information. But each browser is different.

The code is as follows:

<script>
 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. The second type: check whether it is mobile, ipad, iphone, WeChat, QQ, etc.

2.1 The code is as follows:

<script>
//判断访问终端
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 How to use

/判断是否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 Detect browser language

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

3. Determine iPhone|iPad|iPod|iOS|Android client

The code is as follows:

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. Determine PC or mobile terminal

The code is as follows:

<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. Commonly used jump codes

Look at the code

<script>
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == &#39;ipad&#39;;
  var bIsIphone = sUserAgent.match(/iphone os/i) == &#39;iphone os&#39;;
  var bIsMidp = sUserAgent.match(/midp/i) == &#39;midp&#39;;
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == &#39;rv:1.2.3.4&#39;;
  var bIsUc = sUserAgent.match(/ucweb/i) == &#39;web&#39;;
  var bIsCE = sUserAgent.match(/windows ce/i) == &#39;windows ce&#39;;
  var bIsWM = sUserAgent.match(/windows mobile/i) == &#39;windows mobile&#39;;
  var bIsAndroid = sUserAgent.match(/android/i) == &#39;android&#39;;
  var pathname = location.pathname
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = &#39;http://m.geekjc.com&#39;+pathname; //wap端地址
  }
 })();
 </script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How webpack extracts third-party libraries

Webpack express multi-page site development and implementation steps

vue-cli webpack How to build a vue development environment

The above is the detailed content of How to determine client type in JS. For more information, please follow other related articles on the PHP Chinese website!