js判断浏览器设备与内核

今天写一个下载页面的时候需要判断android或者ios设备以及不同的浏览器打开方式。
上网搜索了一下教程 发现这个教程最清晰简单,并且很好用。在此记录一下,方便以后使用

原理:根据navigator.userAgent返回值识别

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

判断访问终端

//判断访问终端
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, //苹果、谷歌内核
            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('Adr') > -1, //android终端
            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language🙁navigator.browserLanguage || navigator.language).toLowerCase()
}

不同的浏览器设备显示不同内容

//判断是否android浏览器
if(browser.versions.android && !browser.versions.weixin){ 
   alert(这是android浏览器)
 }

//判断是否ios浏览器
if(browser.versions.ios && !browser.versions.weixin){
   alert(这是IOS浏览器)
}
//判断是否微信浏览器
if(browser.versions.weixin){   
   alert(这是微信浏览器)
}

if(!browser.versions.android && !browser.versions.ios && !browser.versions.weixin){
   alert(非andriodios 以及微信浏览器)
}

发表评论

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