响应式布如何用JS判断iPhone、iPad或PC(电脑)?

我们web前端人员常常接到轮播广告的项目，并且还要采用响应式，轮播广告上有两个特效：1.鼠标经过图片变亮，2.点击图会切换成文字描述的层且覆盖图片。正常情况下在pc端是没问题，但是移到移动端情况就有变了，如pad上面就会需要点击两下才能切换，为了解决这种问题，我们采用“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") {

6. } else {

7. $(this).fadeOut();

8. }

9. },function(){

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

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

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;

8. if($is_pc){

9. echo "PC机";

10. }

11. if($is_iphone){

12. echo "iPhone";

13. }

14. if($is_ipad){

15. echo "iPad";

16. }

18. ?>

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

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

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

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

最后总结：

上面的方法，在做响应式布局的项目中常常遇到，希望它能帮助到您。

切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang