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

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

我将使用Windows系统的设备定为PC,毕竟博客面向中国用户,大部分家用设备还是用的Windows系统

iPad 使用的是 Safari Mobile 浏览器,User Agent 是:Mozilla/5.0 (iPad; U;
CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 Version/4.0.4
Mobile/7B334b Safari/531.21.10

原理是判断浏览器提交的USER AGENT

如何判断是否是 iPad 浏览器呢,关键是看它的 User Agent 中是否有
iPad。代码如下:

 代码如下

functionis_iPad(){

<?php
//获取USER AGENT
$agent = strtolower($_SERVER[‘HTTP_USER_AGENT’]);

varua=navigator.userAgent.toLowerCase();

//分析数据
$is_pc = (strpos($agent, ‘windows nt’)) ? true : false;  
$is_iphone = (strpos($agent, ‘iphone’)) ? true : false;  
$is_ipad = (strpos($agent, ‘ipad’)) ? true : false;  
$is_android = (strpos($agent, ‘android’)) ? true : false;  

if==”ipad”){

//输出数据
    if($is_pc){  
        echo “这是PC”;  
    }  
    if($is_iphone){  
        echo “这是iPhone”;  
    }  
    if($is_ipad){  
        echo “这是iPad”;  
    }  
    if($is_android){  
        echo “这是Android”;  
    }  
?>

returntrue;

如果你只判断是否为iphone设备可以如下来进行操作

returnfalse;

 代码如下

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

function get_device_type(){
 $agent = strtolower($_SERVER[‘HTTP_USER_AGENT’]);
 $type = ‘other’;
 if(strpos($agent, ‘iphone’) || strpos($agent, ‘ipad’)  ){
  $type = ‘ios’;
 }
 if(strpos($agent, ‘android’)){
  $type = ‘android’;
 }
 return $type;
}

},function.fadeIn;

我现在需要在PC端执行这段代码,在IPAD上不执行,于是我进行一下处理:

varua=navigator.userAgent.toLowerCase();

if==”ipad”){

},function(){

if==”ipad”){

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

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

$is_iPad=strpos($_SERVER[‘HTTP_USER_AGENT’],’iPad’);

$agent=strtolower($_SERVER[‘HTTP_USER_AGENT’]);

$is_pc=(strpos($agent,’windowsnt’))?true:false;

$is_iphone=(strpos($agent,’iphone’))?true:false;

$is_ipad=(strpos($agent,’ipad’))?true:false;

echo”PC机”;

echo”iPhone”;

echo”iPad”;

同样我们也可以用Java代码来弄,如下:

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

RewriteRule^$]

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

总结:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注