使用JS判断客户端浏览器操作系统类型

Posted 一片天空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JS判断客户端浏览器操作系统类型相关的知识,希望对你有一定的参考价值。

一、JS判断客户端类型

  JS判断客户端是否是ios或者android手机移动端

  通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端。

核心代码如下:

方法一:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
 7 <meta name="format-detection"content="telephone=no">
 8 <title>判断客户端类型1</title>
 9 </head>
10 <body>
11     <script type="text/javascript"> 
12         var u = navigator.userAgent; 
13         var isAndroid = u.indexOf(Android) > -1 || u.indexOf(Adr) > -1; //android终端 
14         var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
15         if (isAndroid) {
16             alert(这是Android); 
17         }
18         if (isiOS) {
19             alert(这是IOS); 
20         }
21     </script>
22 </body>
23 </html> 

方法二:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
 7 <meta name="format-detection"content="telephone=no">
 8 <title>判断客户端类型2</title>
 9 </head>
10 <body>
11     <script type="text/javascript">
12         if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 
13             //alert(navigator.userAgent); 
14             alert(这是IOS);
15         } else if (/(Android)/i.test(navigator.userAgent)) { 
16             //alert(navigator.userAgent); 
17             alert(这是Android);
18         } else { 
19             alert(这是PC);
20         };
21     </script>
22 
23 </body>
24 </html>

 

二、JS检测是否在微信打开

   使用js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息,那么我们也可以通过该方法来获取微信内置浏览器的相关信息。根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
 7 <meta name="format-detection"content="telephone=no">
 8 <title>判断是否在微信里打开</title>
 9 <meta name="description" content="">
10 <meta name="keywords" content="">
11 <link href="" rel="stylesheet">
12 </head>
13 <body>
14     <script type="text/javascript">
15         function is_weixn(){  
16             var ua = navigator.userAgent.toLowerCase();  
17             if(ua.match(/MicroMessenger/i)=="micromessenger") {  
18                 alert(在微信里打开); 
19             } else {  
20                 alert(不在微信里打开); 
21             }  
22         }
23         
24        is_weixn();
25     </script>
26 </body>
27 </html>

 

三、JS判断操作系统类型

   在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性,比如:我们有一个网站, 在Windows下浏览效果良好,但是到了Linux下,由于许多特性不同,会造成在浏览上的细微差异,甚至会影响到良好的用户体验。这个时候我们就需要利用 Javascript对操作系统的类型以及某些特性进行判断,分而治之,从而实现网站在跨平台浏览时候保持良好的用户体验。

下边是对Windows、Mac、Linux、Unix擦作系统进行判断的代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
 7 <meta name="format-detection"content="telephone=no">
 8 <title>判断操作系统类型</title>
 9 </head>
10 <body>
11     <script type="text/javascript">
12         function detectOS() {
13             var sUserAgent = navigator.userAgent;
14             var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
15             var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
16             if (isMac) return "Mac";
17             var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
18             if (isUnix) return "Unix";
19             var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
20             if (isLinux) return "Linux";
21             if (isWin) {
22                 var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
23                 if (isWin2K) return "Win2000";
24                 var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
25                 if (isWinXP) return "WinXP";
26                 var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
27                 if (isWin2003) return "Win2003";
28                 var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
29                 if (isWinVista) return "WinVista";
30                 var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
31                 if (isWin7) return "Win7";
32             }
33             return "other";
34         }
35 
36         alert("您的操作系统是:" + detectOS());
37     </script>
38 </body>
39 </html>

 

以上是关于使用JS判断客户端浏览器操作系统类型的主要内容,如果未能解决你的问题,请参考以下文章

js判断浏览器所在的客户端类型

js判断浏览器客户端类型

JS----判断客户端类型

JS辨别访问浏览器判断是android还是ios系统

怎样使用js代码实现客户端浏览器延时30秒后自动跳转到浏览器默认主页?

js检测浏览器类型