jQuery获取用户浏览设备设置不同header

　　前几天遇到公司一个需求，想要将公司网站做成两版，当用户使用手机端访问的时候显示的东西比较少，排版比较清新；当用户使用电脑端访问的时候，正常显示全部内容。(比较轻松点的办法是使用bootstrap框架来做)，但对于大型网站或者电商类网站来说，boot就不太适合了。

　　于是，使用jQuery写了一个思路，使用js获取用户设备是一个我很少碰到的，往往都是后端来获取，所以查阅了资料，整理全部代码(思路)如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>jQuery获取用户浏览设备设置不同header</title>
 6     <style>
 7         .hid{
 8             display: none;
 9         }
10         #d1{
11             width:100%;
12             height:50px;
13             background-color: aqua;
14         }
15 
16         #d2{
17             width:100%;
18             height:50px;
19             background-color: brown;
20         }
21     </style>
22 </head>
23 
24 <body>
25         <header>
26             <div id="d1" class="hid"><h3>我是电脑访问的！！！！</h3></div>
27             <div id="d2" class="hid"><h3>我是手机访问的！！！！</h3></div>
28         </header>
29         <script src="jquery-1.11.3.js"></script>
30         <script>
31             (function browserRedirect() {
32                 //判断用户访问设备类型
33                 var UserAgent = navigator.userAgent.toLowerCase();   //将获得的设备数据转换为小写字母
34 
35                 var IsIpad = sUserAgent.match(/ipad/i) == "ipad";
36                 var IsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
37                 var IsUc = sUserAgent.match(/ucweb/i) == "ucweb";
38                 var IsAndroid = sUserAgent.match(/android/i) == "android";
39                 var IsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
40 
41                 if (! (IsIpad || IsIphoneOs  || IsUc || IsAndroid  || IsWM)) {
42 
43                         $("#d1").removeClass("hid");      //如果是电脑端。将d1显示，d2隐藏
44 
45                 }else{
46 
47                         $("#d2").removeClass("hid");      //如果是手机端。将d2显示，d1隐藏
48 
49                 }
50             })();
51         </script>
52 </body>
53 </html>

如果有更好的思路，可以多多交流。

posted @ 2016-11-16 14:27  Sihan  阅读(1442)  评论(0)  编辑  收藏  举报