×

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

作者:Terry2014.08.12来源:Web前端之家浏览:32563评论:0
关键词:iPhoneiPadJS

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

iPad 使用的是 Safari Mobile 浏览器,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 浏览器呢,关键是看它的 User Agent 中是否有 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 页面。

总结:

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/pand-sheb-style.html

网友评论文明上网理性发言已有0人参与

发表评论: