首页 > 编程语言 > 详细

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

时间:2015-12-28 23:14:37      阅读:301      评论:0      收藏:0      [点我收藏+]

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 };

 

[网上参考]

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

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

 

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

原文:http://www.cnblogs.com/k11590823/p/5084122.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!