Web前端之家,PC设备的议程

前几日在做四个轮播广告的档期的顺序,轮播广告上有七个特效:第一便是鼠标经过图片变亮,再便是点击图会切换来文字描述的层且覆盖图片。平日那样的效果在PC端没什么难题的,然则到IPAD上面就能够要求点击两下能力切换,所以小编想了想,有没办法让ipad上只实行点击的JS代码,而不实行滑动的代码,于是就悟出了“用JS推断终端设备”来消除那几个标题,下边就享受下方法:

自己将运用Windows系统的设备定为PC,终究博客面向中国客户,超越52%生活的费用设备也许用的Windows系统

先大家来探视一段用php怎么着鉴定识别客商是由此 PC、华为平板 照旧手提式有线电话机来拜望网址?

平板电脑 使用的是 Safari Mobile 浏览器,User Agent 是:Mozilla/5.0 (surface; 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

原理是推断浏览器提交的USERAV4 AGENT

<?php
$uAgent = $_SERVER[‘HTTP_USER_AGENT’];
$osPat = “mozilla|m3gate|winwap|openwave|Windows NT|Windows
3.1|95|Blackcomb|98|ME|XWindow|ubuntu|Longhorn|AIX|Linux|AmigaOS|BEOS|HP-UX|OpenBSD|FreeBSD|NetBSD|OS/2|OSF1|SUN”;
if(preg_match(“/($osPat)/i”,
$uAgent ))
{
    echo “来着PC访问”;
}
else
{
    echo “其余终端访问”;
}
 
?>

如何推断是还是不是是 surface 浏览器呢,关键是看它的 User Agent 中是或不是有
三星平板。代码如下:

 代码如下

以下是Tencent的通过JS语句剖断WEB网址的访谈端是Computer如故手提式无线电话机

functionis_iPad(){

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

天涯论坛的适配代码
什么推断访谈网址的机器类型-怎么样决断ipad
JS 决断浏览器客商端类型(ipad,iphone,android卡塔尔

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;  

    <script
type=”text/javascript”>
    <!–
           
//平台、设备和操作系统
            var system = {
                win: false,
                mac: false,
                xll: false,
                ipad:false
            };
            //检查实验平台
            var p = navigator.platform;
            system.win = p.indexOf(“Win”) == 0;
            system.mac = p.indexOf(“Mac”) == 0;
            system.x11 = (p == “X11”) || (p.indexOf(“Linux”) == 0);
            system.ipad = (navigator.userAgent.match(/iPad/i) !=
null)?true:false;
            //跳转语句,固然是手提式有线电话机访问就机关跳转到wap.baidu.com页面
            if (system.win || system.mac || system.xll||system.ipad) {
     
            } else {
     
                window.location.href = “”;
            }
    –>
    </script>

if==”ipad”){

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

博客园的适配代码

returntrue;

即使您只看清是还是不是为iphone设备能够如下来实行操作

    <script type=”text/javascript”>  
    if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||
(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
        if(window.location.href.indexOf(“?mobile”)<0){
            try{
               
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                   
window.location.href=””;
                }else if(/iPad/i.test(navigator.userAgent)){
                }else{
                   
window.location.href=””
                }
            }catch(e){}
        }
    }
    </script>

returnfalse;

 代码如下

    <script type=”text/javascript”>
        var browser = {
            versions : function() {
                var u = navigator.userAgent, app =
navigator.appVersion;
                return
{//移动终端浏览器版本音讯                                  
                trident : u.indexOf(‘Trident’) > -1,
//IE内核                                  
                presto : u.indexOf(‘Presto’) > -1,
//opera内核                                  
                webKit : u.indexOf(‘AppleWebKit’卡塔尔 > -1,
//苹果、谷歌(Google)水源                                  
                gecko : u.indexOf(‘Gecko’State of Qatar > -1 && u.indexOf(‘KHTML’卡塔尔== -1, //火狐内核                                 
                mobile : !!u.match(/AppleWebKit.*Mobile.*/)
                        || !!u.match(/AppleWebKit/卡塔尔,
//是或不是为活动终端                                  
                ios : !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
//ios终端                  
                android : u.indexOf(‘Android’卡塔尔(قطر‎ > -1 ||
u.indexOf(‘Linux’State of Qatar > -1,
//android终端也许uc浏览器                                  
                iPhone : u.indexOf(‘iPhone’) > -1 || u.indexOf(‘Mac’)
> -1, //是否为iPhone或者QQHD浏览器                     
                iPad: u.indexOf(‘iPad’) > -1, //是否iPad        
                webApp : u.indexOf(‘Safari’卡塔尔(قطر‎ ==
-1,//是还是不是web应该程序,未有底部与头部
                google:u.indexOf(‘Chrome’)>-1
            };
        }(),
        language : (navigator.browserLanguage ||
navigator.language).toLowerCase()
        }
        document.writeln(“语言版本: “+browser.languageState of Qatar;
        document.writeln(” 是还是不是为活动终端: “+browser.versions.mobile卡塔尔(قطر‎;
    </script>

拿 作者遇上的特别标题实施下,原生代码是那般的:

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;
}

哪些决断访谈网址的机器类型-怎么样判别ipad

},function.fadeIn;

怎么着剖断是还是不是是 GALAXY Tab 浏览器呢,关键是看它的 User Agent 中是还是不是有
平板电脑。华为平板 使用的是 Safari Mobile 浏览器,他的的 User Agent 是:

作者即日亟需在PC端实践这段代码,在IPAD上不实行,于是小编实行一下管理:

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

varua=navigator.userAgent.toLowerCase();

function is_iPad(){        
 [object Object] [object Object] [object Object]var ua =
navigator.userAgent.toLowerCase();
 [object Object] [object Object] [object
Object]if(ua.match(/iPad/i)==”ipad”) {                
 [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object]return true;
 [object Object] [object Object] [object Object]} else {
 [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object]return false;
 [object Object] [object Object] [object Object]}
}

if==”ipad”){

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

},function(){

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ [R=301]

if==”ipad”){

JS 推断浏览器顾客端类型(ipad,iphone,android卡塔尔国

大家发往后ipad的时候是空值,其实您也得以写上return:false,作者这里没写是因为会影响其余一些的JS代码效果。

    <script type=”text/javascript”>  
       var bForcepc
    = fGetQuery(“dv”) == “pc”;   
       function
    fBrowserRedirect(){   
           var sUserAgent = navigator.userAgent.toLowerCase();  
           var bIsIpad = sUserAgent.match(/ipad/i) ==
    “ipad”;    
           var bIsIphoneOs = sUserAgent.match(/iphone os/i) == “iphone
os”;  
           var bIsMidp = sUserAgent.match(/midp/i) == “midp”;  
           var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == “rv:1.2.3.4”;
 
           var bIsUc = sUserAgent.match(/ucweb/i) == “ucweb”;  
           var bIsAndroid = sUserAgent.match(/android/i) == “android”;
 
           var bIsCE = sUserAgent.match(/windows ce/i) == “windows ce”;
 
           var bIsWM = sUserAgent.match(/windows mobile/i) == “windows
    mobile”;   
           if(bIsIpad){   
               var sUrl =
    location.href;      
               if(!bForcepc){   
                   window.location.href = “”;
 
               }   
           }   
           if(bIsIphoneOs || bIsAndroid){   
               var sUrl =
    location.href;      
               if(!bForcepc){   
                   window.location.href = “”;
 
               }   
           }   
           if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){   
               var sUrl =
    location.href;      
               if(!bForcepc){   
                   window.location.href = “”;  
               }   
           }   
       }  
       function
    fGetQuery(name卡塔尔(قطر‎{//获取参数值   
           var sUrl =
window.location.search.substr(1);
 
           var r = sUrl.match(new RegExp(“(^|&)” + name +
    “=([^&]*)(&|$)”));  
           return (r == null ? null : (r[2]));  
       }  
       function
    fShowVerBlock(){     
           if(bForcepc){   
               document.getElementByIdx_x(“dv_block”).style.display =
“block”;  
           }   
           else{   
               document.getElementByIdx_x(“ad_block”).style.display =
“block”;  
           }   
       }  
       fBrowserRedirect();   
       </script>

此处能够多补偿下,即使在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 页面。

总结:

上边提到的那些主题素材,在做响应式布局的时候平日会高出,借使调控了它,相信在后来的切近项目中会运用的应付自如了。好啊,就说那样多吧,假如你有标题,都足以给本身在线留言,笔者都会第有的时候间给您恢复生机。

发表评论

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