JS 代码,兼容各大浏览器

  已经亲自测试过,在谷歌、火狐、opera、Safari、IE(6-11)、360(极速模式,兼容模式)下,浏览器均能正常判断,对于大家搞兼容这方面可以更好更快的处理,其中,只要 IE 的各个版本设置好了,360浏览器的兼容模式就可以正常的显示大家调试的页面,代码如下:

$(function () {
window.onload = function () {
//application/vnd.chromium.remoting-viewer 可能为360特有
var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
if (isChrome() && is360) {
var result1 = window.matchMedia('(max- 1120px)');
var result2 = window.matchMedia('(max- 1240px)');
var result3 = window.matchMedia('(max- 2950px)');
// console.log("检测到是360浏览器");
if (result1.matches){
}else if (result2.matches){
}else if (result3.matches){
}
}
};
//检测是否是谷歌内核(可排除360及谷歌以外的浏览器)
function isChrome(){
var ua = navigator.userAgent.toLowerCase();
return ua.indexOf("chrome") > 1;
}
//测试mime
function _mime(option, value) {
var mimeTypes = navigator.mimeTypes;
for (var mt in mimeTypes) {
if (mimeTypes[mt][option] == value) {
return true;
}
}
return false;
}
});

$(function () { var ua = window.navigator.userAgent; var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; var isFirefox = ua.indexOf("Firefox") != -1; var isOpera = window.opr != undefined; var isChrome = ua.indexOf("Chrome") && window.chrome; var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1; if (isIE) { var browser=navigator.appName; var b_version=navigator.appVersion; var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0") {        if ($(window).width() <= 1024){        }        else if ($(window).width() <= 1240){        }        else if ($(window).width() <= 2950){        } } else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0") {        if ($(window).width() <= 1024){        }        else if ($(window).width() <= 1240){        }        else if ($(window).width() <= 2950){        } } else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0") {       if ($(window).width() <= 1024){        }        else if ($(window).width() <= 1240){        }       else if ($(window).width() <= 2950){        } } else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0") {        if ($(window).width() <= 1024){        }        else if ($(window).width() <= 1240){        }        else if ($(window).width() <= 2950){        } } else if (window.ActiveXObject) { var reg = /10.0/; var str = navigator.userAgent; if (reg.test(str)) {          if ($(window).width() <= 1024){          }          else if ($(window).width() <= 1240){          }          else if ($(window).width() <= 2950){          } } } } else if (Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject) { var result1 = window.matchMedia('(max- 1024px)'); var result2 = window.matchMedia('(max- 1240px)'); var result3 = window.matchMedia('(max- 2950px)'); if(result1.matches){ } else if(result2.matches){ } else if(result3.matches){ } } else { var result4 = window.matchMedia('(max- 1024px)'); var result5 = window.matchMedia('(max- 1240px)'); var result6 = window.matchMedia('(max- 2950px)'); if (result4.matches){ if (isFirefox) { } else if (isOpera) { } else if (isChrome) { } else if (isSafari) { } } else if (result5.matches){ if (isFirefox) { } else if (isOpera) { } else if (isChrome) { } else if (isSafari) { } } else if (result6.matches){ if (isFirefox) { } else if (isOpera) { } else if (isChrome) { } else if (isSafari) { } } } })

  这里我用到了两种方法,一个是对浏览器的宽度进行判断($window.width()),一个是通过 js 媒体查询来判断(window.matchMedia()),但最终的目的是一样的,这里的 js 媒体查询在 IE(6-8)版本中是不支持的,但是为了稳妥,我在 IE10 版本中就不使用 js 媒体查询这种方式了,而是使用了 $window.width() 进行了判断,多谢大家观看,有问题可多多交流。

原文地址:https://www.cnblogs.com/zxn-9588/p/7212072.html