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-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() 進行了判斷,多謝大家觀看,有問題可多多交流。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM