使用JS判断设备终端是iPhone、iPad或者电脑(PC) - Web前端

今天在做一个轮播广告的项目，轮播广告上有两个特效：第一就是鼠标经过图片变亮，再就是点击图会切换成文字描述的层且覆盖图片。通常这样的效果在PC端没什么问题的，但是到iPad上面就会需要点击两下才能切换，所以我想了想，有没有办法让ipad上只执行点击的JS代码，而不执行滑动的代码，于是就想到了“用js判断终端设备”来解决这个问题，下面就分享下方法：

iPad 使用的是 Safarimobile浏览器，user agent 是：
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) appleWEBKit/531.21.10 (Khtml, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 

如何判断是否是 iPad 浏览器呢，关键是看它的 UserAgent 中是否有 iPad。代码如下：

1. function is_iPad(){     

2.     var ua = navigator.userAgent.toLowerCase();     

3.     if(ua.match(/iPad/i)=="ipad") {     

4.         return true;     

5.     } else {     

6.         return false;     

7.     }     

8. }    

拿 我碰到的那个问题实践下，原生代码是这样的：

1. $(function(){   

2.         $(".wangge").hover(function(){   

3.           $(this).fadeOut()   

4.         },function(){   

5.           $(this).fadeIn();   

6.         });   

7.     })  

我现在需要在pc端执行这段代码，在IPAD上不执行，于是我进行一下处理：

1. $(function(){   

2.         var ua = navigator.userAgent.toLowerCase();   

3.         $(".wangge").hover(function(){             

4.           if(ua.match(/iPad/i)=="ipad") {     

5.                 

6.           } else {     

7.               $(this).fadeOut();     

8.           }               

9.         },function(){   

10.           if(ua.match(/iPad/i)=="ipad") {    

11.                 

12.           } else {     

13.               $(this).fadeIn();     

14.           }     

15.         });   

16.     })     

我们发现在ipad的时候是空值，其实您也可以写上return:false，我这里没写是因为会影响其他部分的JS代码效果。

这里可以多补充下，如果在PHP代码里，我们可以这样来：

1. $is_iPad = (bool) strpos($_SERVER['http_USER_AGENT'],'iPad');    

或者

1. <?php     

2.      

3. $agent = strtolower($_SERVER['HTTP_USER_AGENT']);     

4. $is_pc = (strpos($agent, 'windows nt')) ? true : false;     

5. $is_iPhone = (strpos($agent, 'iphone')) ? true : false;     

6. $is_ipad = (strpos($agent, 'ipad')) ? true : false;     

7.      

8. if($is_pc){     

9.  echo "PC机";     

10. }     

11. if($is_iphone){     

12.  echo "iPhone";     

13. }     

14. if($is_ipad){     

15.  echo "iPad";     

16. }     

17.      

18. ?>    

同样我们也可以用java代码来弄，如下：

1. RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$     

2. RewriteRule ^(.*)$ http://ipad.fAIryfish.net [R=301]  

如果是 iPad 浏览器，跳转到 iPad 页面。

总结：

上面提到的这个问题，在做响应式布局的时候经常会遇到，如果掌握了它，相信在以后的类似项目中会运用的游刃有余了。好啦，就说这么多吧，如果您有问题，都可以给我在线留言，我都会第一时间给您回复。