js判断页面从何种浏览器打开

问题

有时项目需要根据不同的设备进行不同的处理，需要判断到底是哪种设备打开了项目。

移动端浏览器检测

移动终端浏览器版本信息:

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('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) {//判断是否是移动设备打开
        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
        	//在微信中打开
        	if(browser.versions.android){
                alert('weixin-android')
        	}
        	if(browser.versions.ios){
        		alert('weixin-ios')
        	} 
        }else if(browser.versions.ios) {
            //在IOS浏览器打开
            alert('ios-browser')
        }else if(browser.versions.android){
            //在安卓浏览器打开
            alert('android-browser')
        }
        ...
} else {
        //否则就是PC浏览器打开
        alert('pc')
}

pc端浏览器检测

function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
	  return "Chrome";
	}
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}

调用上面的函数

var mb = myBrowser();

if ("IE" == mb) {
    alert("我是 IE");
}
if ("FF" == mb) {
    alert("我是 Firefox");
}
if ("Chrome" == mb) {
    alert("我是 Chrome");
}
if ("Opera" == mb) {
    alert("我是 Opera");
}
if ("Safari" == mb) {
    alert("我是 Safari");
}	

// ie10-11
function isIE() { //ie?
    if (!!window.ActiveXObject || "ActiveXObject" in window){
  		alert("我是ie")
    	return true;
    }
}
isIE();

区别Chrome和360浏览器

 //测试mime
 function _mime(option, value) {
     var mimeTypes = navigator.mimeTypes;
     for (var mt in mimeTypes) {
         if (mimeTypes[mt][option] == value) {
             return true;
         }
     }
     return false;
 }
 var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
             
 if (isChrome() && is360) { 
     alert("我是 360");
 }

最终要怎么使用根据项目需求，按照上面排列组合即可~