已經親自測試過,在谷歌、火狐、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-width: 1120px)');
var result2 = window.matchMedia('(max-width: 1240px)');
var result3 = window.matchMedia('(max-width: 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-width: 1024px)'); var result2 = window.matchMedia('(max-width: 1240px)'); var result3 = window.matchMedia('(max-width: 2950px)'); if(result1.matches){ } else if(result2.matches){ } else if(result3.matches){ } } else { var result4 = window.matchMedia('(max-width: 1024px)'); var result5 = window.matchMedia('(max-width: 1240px)'); var result6 = window.matchMedia('(max-width: 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() 進行了判斷,多謝大家觀看,有問題可多多交流。