项目总结（3） H5 JS判断客户端是否是iOS或者Android手机移动端

var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android：'+isAndroid);
alert('是否是iOS：'+isiOS);
if(isAndroid){
$ ("#choose").attr('capture','camera');
}

Navigator对象包含了Web浏览器的基本信息(如名称，版本，操作系统等)

通过window.navigator方式可以引用该对象，并利用它的属性读取客户端基本信息

Navigator的5个主要属性：

appName:Web浏览器的名称

appVersion:浏览器的版本号和其他版本信息

userAgent:浏览器在它的USER-AGENT HTTP标题中发送的字符串。该属性包含appName,appVersion属性的所有信息

appCodeName:浏览器的代码名

platform:客户浏览器所在的操作系统

[html]view plain copy 
     
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>navigator对象</title>  
 </head>  
   
 <body>  
 <script type="text/javascript">  
 var appname = navigator.appName;  
 var appversion = navigator.appVersion;  
 var useragent = navigator.userAgent;  
 var appcodename = navigator.appCodeName;  
 var platform = navigator.platform;  
 document.write(appname+"<br>"+appversion+"<br>"+useragent+"<br>"+appcodename+"<br>"+platform);  
 </script>  
 </body>  
 </html>  

常用浏览器的检测方法：

1.特征检测法

这个是针对要了解浏览器的具体哪一项信息或者具体支持哪一项特定功能来决定的检测方式。

非精确判断，但却最安全。我们只要知道它存在不存在就可以了。

打个比方，我们只要if(navigator.appName.indexOf("Netscape")!=-1){***}

而不要输出具体的浏览器的名称结果

2.字符串检测法

这种比较正规的了，虽然检测浏览器的型号和类型很困难而且很容易出现误差。

一、检测浏览器的类型和版本：

[html]view plain copy 
     
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>navigator对象</title>  
 </head>  
   
 <body>  
 <script type="text/javascript">  
 var ua = navigator.userAgent.toLowerCase();  
 var info={  
     ie:/msie/.test(ua)&&!/opera/.test(ua),  
     op:/opera/.test(ua),  
     sa:/version.*safari/.test(ua),  
     ch:/chrome/.test(ua),  
     ff:/gecko/.test(ua)&&!/webkit/.test(ua)  
     };  
 (info.ie)&&alert("IE");  
 (info.ch)&&alert("Chrome");  
 (info.ff)&&alert("Firefox");  
 </script>  
 </body>  
 </html>  

二、设计函数获取IE版本号：

IE的版本众多，伴随着兼容的问题的增多，我们也有需求来获取IE版本的号，这样在写网页的时候可以对不同的IE版本做响应的调整以呈现相同的效果，而避免了由兼容导致的显示的问题。

[html]view plain copy 
     
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>navigator对象</title>  
 </head>  
   
 <body>  
 <script type="text/javascript">  
 function getIEVer()  
 {  
     var ver = navigator.userAgent;//获取用户端的Web浏览器版本号  
     var a= ver.indexOf("MSIE");//检测特殊字符串"MSIE"的位置，因为IE的版本信息中总是会有MSIE的存在，这是共性  
     if(a<0){return 0;}  
     return parseFloat(ver.substring(a+5,ver.indexOf(";",a)));  
 }  
 alert(getIEVer());  
 </script>  
 </body>  
 </html>  

刚才在IE11上试了一下，返回是0，然后alert(navigation.appVersion)发现出来的不再是之前的那种格式了，表示很无辜啊。只能用其他方法检测IE11的版本号了。

三、检测客户端操作系统

var isWin = (navigator.userAgent.indexOf("Win")!=-1)

//如果是windows操作系统，则返回TRUE

其他的是"Mac","X11","Linux"分别是Macintosh,UNIX,Linux

项目总结（3） H5 JS判断客户端是否是iOS或者Android手机移动端

猜你喜欢