如何使用Javascript判斷瀏覽器終端設備

WEB開發中如何經過Javascript來判斷終端爲PC、IOS(iphone)、Android呢？

 

能夠經過判斷瀏覽器的userAgent，用正則來判斷手機是不是ios和Android客戶端

1 var u = navigator.userAgent;
2     isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端
3     isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端

下面一個比較全面的瀏覽器檢查函數，提供更多的檢查內容，你能夠檢查是不是移動端（Mobile）、ipad、iphone、微信、QQ等。

 1 <script type="text/javascript">
 2 //判斷訪問終端
 3 var browser={
 4     versions:function(){
 5         var u = navigator.userAgent, app = navigator.appVersion;
 6         return {
 7             trident: u.indexOf('Trident') > -1, //IE內核
 8             presto: u.indexOf('Presto') > -1, //opera內核
 9             webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
10             gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內核
11             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端
12             ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
13             android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端
14             iPhone: u.indexOf('iPhone') > -1 , //是否爲iPhone或者QQHD瀏覽器
15             iPad: u.indexOf('iPad') > -1, //是否iPad
16             webApp: u.indexOf('Safari') == -1, //是否web應該程序，沒有頭部與底部
17             weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
18             qq: u.match(/\sQQ/i) == " qq" //是否QQ
19         };
20     }(),
21     language:(navigator.browserLanguage || navigator.language).toLowerCase()
22 }
23 </script>

使用方法：

 1 //判斷是否IE內核
 2 if(browser.versions.trident){ alert("is IE"); }
 3 //判斷是否webKit內核
 4 if(browser.versions.webKit){ alert("is webKit"); }
 5 //判斷是否移動端
 6 if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移動端"); }
 7 檢測瀏覽器語言
 8 currentLang = navigator.language;   //判斷除IE外其餘瀏覽器使用語言
 9 if(!currentLang){//判斷IE瀏覽器使用語言
10     currentLang = navigator.browserLanguage;
11 }
12 alert(currentLang);

上面只是平時用的最多的一種方法，其實還有第二種方法：

1 if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
2     //alert(navigator.userAgent);  
3     window.location.href ="iPhone.html";
4 } else if (/(Android)/i.test(navigator.userAgent)) {
5     //alert(navigator.userAgent); 
6     window.location.href ="Android.html";
7 } else {
8     window.location.href ="pc.html";
9 };