javascript实现浏览器检测和客户端检测

1、IE6和IE7检测并提醒升级

html:

 1 <div class="head">hello!我兼容IE8+,Firefox,Chrome</div>
 2 <div class="ie7andie6" style="display:none;">
 3     <div class='warning'>
 4         <p>您使用的浏览器版本较低,建议您换用下面这些浏览器试试吧。</p>
 5     </div>
 6     <ul class="browsers">
 7         <li>
 8             <a class='ie' href="http://windows.microsoft.com/zh-cn/internet-explorer/ie-11-worldwide-languages" target='_blank'>IE11</a>
 9         </li>
10         <li>
11             <a class='ff' href="http://firefox.com.cn/" target='_blank'>Firefox</a>
12         </li>
13         <li>
14             <a class='chrome' href="http://www.google.cn/intl/zh-CN/chrome/" target='_blank'>Chrome</a>
15         </li>
16     </ul>
17 </div>
View Code

css:

 1 .head{margin-top:30px;text-align:center;font-size:18px;}
 2 .ie7andie6{width:600px;margin:30px auto;text-align:center;}
 3 .ie7andie6 .warning{font-size:18px;font-weight:bold;}
 4 .warning p{line-height:1.5;}
 5 .browsers{margin:20px 0 0;height:148px;}
 6 .browsers li{float:left;display:inline;width:128px;height:128px;margin:0 35px;text-align:center;}
 7 .browsers li a{display:block;padding-top:128px;*zoom:1;}
 8 .browsers .ie{background:url(ie.png) no-repeat;}
 9 .browsers .ff{background:url(firefox.png) no-repeat;}
10 .browsers .chrome{background:url(chrome.png) no-repeat;}
View Code

js:

 1 // 需要先引入jQuery
 2 $(function(){
 3     if(window.ActiveXObject){
 4         var browser=navigator.appName;
 5         var version=navigator.appVersion;
 6         var version=version.split(";"); 
 7         var trim_Version=version[1].replace(/[ ]/g,""); 
 8         if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0"  || trim_Version=="MSIE7.0"){ 
 9             $(".head").hide();
10             $(".ie7andie6").show();
11         } 
12     }
13 });

提示:在浏览器控制台输入navigator,你可以看到关于浏览器的许多参数。

 

2、苹果端-安卓端-pc端的检测

js:

1 if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
2     console.log('苹果端:' + navigator.userAgent);
3 }else if(/(Android)/i.test(navigator.userAgent)) {
4     console.log('安卓端:' + navigator.userAgent);
5 }else{
6     console.log('pc端:' + navigator.userAgent);
7 };

 

3、pc端浏览器类型判断

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <meta charset="utf-8" />
 5 <title>navigator.userAgent</title>
 6 </head>
 7 
 8 <body>
 9 <script>
10  var isIE = navigator.userAgent.match(/MSIE/)!= null,
11      isIE7 = navigator.userAgent.match(/MSIE 7.0/)!= null,
12      isIE8 = navigator.userAgent.match(/MSIE 8.0/)!= null,
13      isIE9 = navigator.userAgent.match(/MSIE 9.0/)!= null,
14      isIE10 = navigator.userAgent.match(/MSIE 10.0/)!= null,
15      isChrome = navigator.userAgent.match(/Chrome/)!= null,
16      isFirefox = navigator.userAgent.match(/Firefox/)!= null;
17      brower = navigator.userAgent;
18 console.log(brower);
19 console.log('isIE:' + isIE);
20 console.log('isIE7:' + isIE7);
21 console.log('isIE8:' + isIE8);
22 console.log('isIE9:' + isIE9);
23 console.log('isIE10:' + isIE10);
24 console.log('isChrome:' + isChrome);
25 console.log('isFirefox:' + isFirefox);
26 </script>
27 </body>
28 </html>
View Code

tips -- 条件注释

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 摘自网上

除IE外都可识别:意思是不仅IE可以识别,其他浏览器都可以识别(网上这表述实在太坑人了,还到处都是复制粘贴)。

PS:条件注释的基本结构和HTML的注释(<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。(IE可以识别条件注释)

 

 

[网上参考]

通过浏览器navigator判断浏览器版本或者手机类型:http://www.haorooms.com/post/js_navigator_bb

js判断移动端或者pc端或者安卓和苹果浏览器的方法:http://haorooms.com/post/js_pc_iosandmobile

条件注释判断浏览器版本:http://www.cnblogs.com/thinkingthigh/archive/2013/06/19/3144239.html

 

你可能感兴趣的:(javascript实现浏览器检测和客户端检测)