• 使用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>
  • 相关阅读:
    string::push_back()
    string::pop_back
    string::insert
    string::get_allocator
    opencv —— minEnclosingCircle、fitEllipse 寻找包裹轮廓的最小圆、点集拟合椭圆
    opencv —— boundingRect、minAreaRect 寻找包裹轮廓的最小正矩形、最小斜矩形
    opencv —— approxPolyDP 生成逼近曲线
    opencv —— convexHull 寻找并绘制凸包
    opencv —— findContours、drawContours 寻找并绘制轮廓
    opencv —— equalizeHist 直方图均衡化实现对比度增强
  • 原文地址:https://www.cnblogs.com/daipianpian/p/5836576.html
Copyright © 2020-2023  润新知