判断客户端类型,Android,iOS,PC

黑色杜克

在移动端开发的时候,有的时候我们需要判断客户端是什么类型的,安卓or苹果?

苹果在状态栏目和安卓不太一样。

//判断是否是移动或是web
 var browser={  
    versions:function(){   
       var u = navigator.userAgent;
       //var app = navigator.appVersion;
       return {
               //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核  
            presto: u.indexOf('Presto') > -1, //opera内核  
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核  
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端  
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端  
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器  
            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器  
            iPad: u.indexOf('iPad') > -1, //是否iPad    
            webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部  
        };  
     }(),  
    language:(navigator.browserLanguage || navigator.language).toLowerCase()  
}   
  
if(browser.versions.mobile || browser.versions.ios || browser.versions.android ||   
  browser.versions.iPhone || browser.versions.iPad){
      console.log("mobile application")
      window.location = "#";      
}else{
    console.log("web application");
}

我们平时在用的时候可能不需要这么多,就判断一个ios or android 就行了

if(browser.versions.ios){
     console.log("ios");
    _ios.iosHeight();
}
else if(browser.versions.android){
        console.log("andriod");
        _android.addHeight();
    }else{
    console.log("不是移动设备");
}

在不同的客户端执行不同的需求。我们现在做的项目就需要在iOS上加上20的高度

var fullHeight= function(e,b){
    var getH= e,
        selector= $(b),
        $win= $(window),
        fullH,
        containerH;
    // calculate height
    fullH= $win.height();
    containerH= parseInt(fullH-getH);
    //append to selector
    selector.css({
        overflow: 'auto',
        height: containerH+'px'
    });
}

var _ios={
    iosHeight:function(){
        fullHeight(64,'#i');
    }
    
}

这样基本上都可以解决移动端的客户端的判断了

阅读 5.7k

前段学习总结
督促自己学习,平时的总结 我对于前段技术的理解

爱技术,爱前段

412 声望
9 粉丝
0 条评论

爱技术,爱前段

412 声望
9 粉丝
文章目录
宣传栏