js判斷瀏覽器類型及版本在網站前端開發中,瀏覽器兼容性是前端開發框架要解決的第一個問題,要解決兼容性問題就得首先准確判斷出瀏覽器的類型及其版本,而判斷瀏覽器的版本一般只能通過分析瀏覽器的userAgent才能知道.
各種瀏覽器的userAgent:
IE各個版本典型的userAgent如下 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Mozilla/4.0 (compatible; MSIE 5.0; Windows NT) Firefox幾個版本的userAgentMozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1 Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3 Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12 Opera提供了專門的瀏覽器標志,就是window.opera屬性。Opera典型的userAgent如下 Opera/9.27 (Windows NT 5.2; U; zh-cn) Opera/8.0 (Macintosh; PPC Mac OS X; U; en) Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0 Safari瀏覽器中有一個其他瀏覽器沒有的openDatabase函數,可做為判斷Safari的標志。Safari典型的userAgent如下 Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13 Mozilla/5.0 (iphone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3 Chrome的userAgent Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13 Apple Inc的userAgent Apple iPhone : Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/1A542a Safari/419.3 iPod Touch : Mozilla/5.0 (iPod; U; CPU iPhone OS 3_1_1 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Mobile/7C145 Apple iPad : Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B367 Safari/531.21.10
判斷瀏覽器版本
if navigator.userAgent.indexOf(」MSIE」)0) {} //判斷是否IE瀏覽器if(isFirefox=navigator.userAgent.indexOf(」Firefox」)0){ }判斷是否火狐瀏覽器if(isSafari=navigator.userAgent.indexOf(」Safari」)0) {}判斷是否Safari瀏覽器 if(isSafari=navigator.userAgent.indexOf(」Opera」)0) {}判斷是否Opera瀏覽器 var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent .match(/ipad/i) == "ipad"; //判斷是否為 ipad var bIsIphoneOs = sUserAgent .match(/iphone os/i) == "iphone os";//判斷是否為iphone os var bIsMidp = sUserAgent .match(/midp/i) == "midp"; //判斷是否為 midp var bIsUc = sUserAgent .match(/ucweb/i) == "ucweb"; //判斷是否為 ucweb var bIsAndroid = sUserAgent .match(/android/i) == "android"; //判斷是否為 android var bIsCE = sUserAgent .match(/windows ce/i) == "windows ce"; //判斷是否為 windows ce var bIsWM = sUserAgent .match(/windows mobile/i) == "windows mobile"; //判斷是否為windows mobile
判斷瀏覽器類型
if navigator.userAgent.indexOf(」MSIE」)0){ //是否是IE瀏覽器 :navigator.userAgent是描述用戶代理信息。ie11已經不支持了,ie11不在包含MSIE欄位 if navigator.userAgent.indexOf(」MSIE 6.0″)0){ //IE6.0 if navigator.userAgent.indexOf(」MSIE 7.0″)0){//IE7.0 if navigator.userAgent.indexOf(」MSIE 8.0″)0){//IE8.0 最短的IE瀏覽器判斷代碼 利用了IE與標准瀏覽器在處理數組的toString方法的差異.對於標准游覽器,如果數組裡面最後一個字元為逗號,JS引擎會自動剔除它. var ie = !-[1,]; alert(ie); jquery判斷瀏覽器類型和瀏覽器版本號的方法 $(document).ready(function(){ varbrow=$.browser; varbInfo=""; if(brow.msie){bInfo="MicrosoftInternetExplorer"+brow.version;} if(brow.mozilla){bInfo="MozillaFirefox"+brow.version;} if(brow.safari){bInfo="AppleSafari"+brow.version;} if(brow.opera){bInfo="Opera"+brow.version;} alert(bInfo); }); 注意:Query 從 1.9 版開始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 方法
❷ js判斷是安卓 還是 ios webview
判斷原理:
javaScript是前端開發的主要語言,我們可以通過編寫JavaScript程序來判斷瀏覽器的類型及版本。JavaScript判斷瀏覽器類型一般有兩種辦法,一種是根據各種瀏覽器獨有的屬性來分辨,另一種是通過分析瀏覽器的userAgent屬性來判斷的。在許多情況下,值判斷出瀏覽器類型之後,還需判斷瀏覽器版本才能處理兼容性問題,而判斷瀏覽器的版本一般只能通過分析瀏覽器的userAgent才能知道。
瀏覽器類型
⑴瀏覽器特有屬性
⑵根據userAgent
瀏覽器版本
⑴根據userAgent
對於手機瀏覽器判斷
1.如何判斷是否為移動終端 利用正則match,
匹配navigator.userAgent是否含有字元串AppleWebKit*****Mobile
安卓q瀏覽器HD版 只有AppleWebKit
2手機語言版本的判斷
使用navigator.browserLanguage 便可得出windows phone語言版本,
當然可惡的小小手機語言版本也有兼容性的差異,兼容Mozilla,以及AppleWebKit內核的瀏覽器訪問其語言版本,它會列出 navigator.language
CODE:
<script type="text/javascript">
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()
}
document.writeln("語言版本: "+browser.language);
document.writeln(" 是否為移動終端: "+browser.versions.mobile);
document.writeln(" ios終端: "+browser.versions.ios);
document.writeln(" android終端: "+browser.versions.android);
document.writeln(" 是否為iPhone: "+browser.versions.iPhone);
document.writeln(" 是否iPad: "+browser.versions.iPad);
document.writeln(navigator.userAgent);
</script>
比較特別的地方
UC瀏覽器沒有安卓報頭,只返回:linux ,這里粗略的根據linux來判斷是安卓(前提必須滿足是移動終端,UC這點是滿足的)
安卓QQ瀏覽器HD版檢測的結果是:mac, Safari
❸ js判斷只允許手機瀏覽器打開,電腦無法訪問怎麼寫,最後給個現成的,
var bs={
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.*/)||!!u.match(/AppleWebKit/), //是否為移動終端
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 || u.indexOf('Mac') > -1, //是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web應該程序,沒有頭部與底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
if(bs.versions.mobile){
if(bs.versions.android||bs.versions.iPhone||bs.versions.iPad||bs.versions.ios){
alert("手機");
}else{
alert("other");
}
}