2. 程式人生 > >JS判斷移動裝置的終端型別（瀏覽器UserAgent）

JS判斷移動裝置的終端型別（瀏覽器UserAgent）

阿新 • • 發佈：2019-01-29
User Agent的判斷是識別瀏覽器的關鍵，不僅僅如此，移動網際網路開發勢頭迅猛，通過User Agent判斷桌面端裝置或移動裝置就變的很為重要。當然，通過User Agent也可以用來改善一定的相容性，比如判斷得到使用者用IE6瀏覽器那麼就是用不同的程式碼。
<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>

另附PC瀏覽器型別UserAgent判斷的函式

<script language="javascript">
var explorer =navigator.userAgent,browse;
if (explorer.indexOf("MSIE") >= 0){
	//ie 
	browse = "ie";
}else if (explorer.indexOf("Firefox") >= 0) {
	// firefox 火狐
	browse = "Firefox";
}else if(explorer.indexOf("Chrome") >= 0){
	//Chrome 谷歌
	browse = "Chrome";
}else if(explorer.indexOf("Opera") >= 0){
	//Opera 歐朋
	browse = "Opera";
}else if(explorer.indexOf("Safari") >= 0){
	//Safari 蘋果瀏覽器
	browse = "Safari";
}else if(explorer.indexOf("Netscape")>= 0) { 
	//Netscape
	browse = "Netscape"; 
}
</script>

你知道世界上有多少種瀏覽器嗎？除了我們熟知的IE, Firefox, Opera, Safari四大瀏覽器之外，世界上還有近百種瀏覽器。

       幾天前，瀏覽器家族有剛誕生了一位小王子，就是Google推出的Chrome瀏覽器。由於Chrome出生名門，儘管他還是個小傢伙，沒有人敢小看他。以後，咱們常說瀏覽器的“四大才子”就得改稱為“五朵金花”了。

       在網站前端開發中，瀏覽器相容性問題本已讓我們手忙腳亂，Chrome的出世不知道又要給我們添多少亂子。瀏覽器相容性是前端開發框架要解決的第一個問題，要解決相容性問題就得首先準確判斷出瀏覽器的型別及其版本。

       JavaScript是前端開發的主要語言，我們可以通過編寫JavaScript程式來判斷瀏覽器的型別及版本。JavaScript判斷瀏覽器型別一般有兩種辦法，一種是根據各種瀏覽器獨有的屬性來分辨，另一種是通過分析瀏覽器的userAgent屬性來判斷的。在許多情況下，值判斷出瀏覽器型別之後，還需判斷瀏覽器版本才能處理相容性問題，而判斷瀏覽器的版本一般只能通過分析瀏覽器的userAgent才能知道。

       我們先來分析一下各種瀏覽器的特徵及其userAgent。

       IE

      只有IE支援建立ActiveX控制元件，因此她有一個其他瀏覽器沒有的東西，就是ActiveXObject函式。只要判斷window物件存在ActiveXObject函式，就可以明確判斷出當前瀏覽器是IE。而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)

      其中，版本號是MSIE之後的數字。

       Firefox

       Firefox中的DOM元素都有一個getBoxObjectFor函式，用來獲取該DOM元素的位置和大小（IE對應的中是getBoundingClientRect函式）。這是Firefox獨有的，判斷它即可知道是當前瀏覽器是Firefox。Firefox幾個版本的userAgent大致如下：

        Mozilla/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
      其中，版本號是Firefox之後的數字。

       Opera

       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

      其中，版本號是靠近Opera的數字。

       Safari

       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 

      其版本號是Version之後的數字。

      Chrome

      Chrome有一個MessageEvent函式，但Firefox也有。不過，好在Chrome並沒有Firefox的getBoxObjectFor函式，根據這個條件還是可以準確判斷出Chrome瀏覽器的。目前，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

      其中，版本號在Chrome只後的數字。

      有趣的是，Chrome的userAgent還包含了Safari的特徵，也許這就是Chrome可以執行所有Apple瀏覽器應用的基礎吧。

      只要瞭解了以上資訊，我們就可以根基這些特徵來判斷瀏覽器型別及其版本了。我們會將判斷的結果儲存在Sys名字空間中，成為前端框架的基本標誌資訊，供今後的程式來讀取。如果判斷出謀種瀏覽器，Sys名字空間將有一個該瀏覽器名稱的屬性，其值為該瀏覽器的版本號。例如，如果判斷出IE 7.0，則Sys.ie的值為7.0；如果判斷出Firefox 3.0，則Sys.firefox的值為3.0。下面是判斷瀏覽器的程式碼：


複製程式碼 <script type="text/javascript">var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        if (window.ActiveXObject)
            Sys.ie = ua.match(/msie ([\d.]+)/)[1]
        elseif (document.getBoxObjectFor)
            Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]elseif (window.MessageEvent &&!document.getBoxObjectFor)
            Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]elseif (window.opera)
            Sys.opera = ua.match(/opera.([\d.]+)/)[1]
        elseif (window.openDatabase)
            Sys.safari = ua.match(/version\/([\d.]+)/)[1];//以下進行測試if(Sys.ie) document.write('IE: '+Sys.ie);
        if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
        if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
        if(Sys.opera) document.write('Opera: '+Sys.opera);
        if(Sys.safari) document.write('Safari: '+Sys.safari);

</script>

複製程式碼

      我們把對IE的判斷放在第一，因為IE的使用者最多，其次是判斷Firefox。按使用者多少的順序來判斷瀏覽器型別，可以提高判斷效率，少做無用功。之所以將Chrome放在第三判斷，是因為我們預測Chrome很快會成為市場佔有率第三的瀏覽器。其中，在分析瀏覽器版本時，用到了正則表示式來析取其中的版本資訊。

      如果你的JavaScript玩得很高，你還可以將前面的判斷程式碼寫成這樣：

複製程式碼 <script type="text/javascript">var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
        document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :        window.MessageEvent &&!document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :        window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
        window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;//以下進行測試if(Sys.ie) document.write('IE: '+Sys.ie);
        if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
        if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
        if(Sys.opera) document.write('Opera: '+Sys.opera);
        if(Sys.safari) document.write('Safari: '+Sys.safari);
    </script> 複製程式碼

      這樣可以使JavaScript程式碼更精簡些。當然，可讀性稍差一些，就看你是重視效率還是重視可維護性了。

      使用不同特徵來判斷瀏覽器的方法，雖然在速度上比用正則表示式分析userAgent要來的快，不過這些特徵可能會隨瀏覽器版本而變化。比如，一種瀏覽器本來獨有的特性取得了市場上的成功，其他瀏覽器也就可能跟著加入該特性，從而使該瀏覽器的獨有特徵消失，導致我們的判斷失敗。因此，相對比較保險的做法是通過解析userAgent中的特徵來判斷瀏覽器型別。何況，反正判斷版本資訊也需要解析瀏覽器的userAgent的。

      通過分析各類瀏覽器的userAgent資訊，不難得出分辨各類瀏覽器及其版本的正則表示式。而且，對瀏覽器型別的判斷和版本的判斷完全可以合為一體地進行。於是，我們可以寫出下面的程式碼：


複製程式碼 <script type="text/javascript">var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;//以下進行測試if (Sys.ie) document.write('IE: '+ Sys.ie);
        if (Sys.firefox) document.write('Firefox: '+ Sys.firefox);
        if (Sys.chrome) document.write('Chrome: '+ Sys.chrome);
        if (Sys.opera) document.write('Opera: '+ Sys.opera);
        if (Sys.safari) document.write('Safari: '+ Sys.safari);
    </script> 複製程式碼

      其中，採用了“... ? ... : ...”這樣的判斷表示式來精簡程式碼。判斷條件是一條賦值語句，既完成正則表示式的匹配及結果複製，又直接作為條件判斷。而隨後的版本資訊只需從前面的匹配結果中提取即可，這是非常高效的程式碼。

       以上的程式碼都是為了打造前端框架所做的預研，並在五大瀏覽器上測試通過。今後，判斷某種瀏覽器只需用if(Sys.ie)或if(Sys.firefox)等形式，而判斷瀏覽器版本只需用if(Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式，表達起來還是非常優雅的。

      前端框架專案已經啟動，一切就看過程和結果了...


相關推薦

JS判斷移動裝置的終端型別（瀏覽器UserAgent）

User Agent的判斷是識別瀏覽器的關鍵，不僅僅如此，移動網際網路開發勢頭迅猛，通過User Agent判斷桌面端裝置或移動裝置就變的很為重要。當然，通過User Agent也可以用來改善一定的相容性，比如判斷得到使用者用IE6瀏覽器那麼就是用不同的程式碼。<s

js判斷是否為整數型別（5種方式）

方式一、使用取餘運算子判斷 任何整數都會被1整除，即餘數是0。利用這個規則來判斷是否是整數。 function isInteger(obj) { return obj%1 === 0 } isInteger(3) // true isInteger(

js判斷移動裝置 並跳轉到手機版

判斷移動裝置一般使用UA 在<head>裡新增經過驗證可以判斷移動端裝置. <script type="text/javascript">     if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMo

js 判斷字串是否為數字（正整數）

/** * 判斷字串是否為數字 * @param nubmer * @returns {boolean} */ function checkRate(nubmer) { //判斷正整數/[1−9]+[0−9]∗]∗/ var re = /^[0-9]+.?[0-9]*/;

JS判斷當前裝置型別

CSS3出來後，我們一般都是通過@media媒體查詢來實現網頁自適應，但是有時候，還是需要我們根據不同的裝置來對應的做不同的顯示，這時候，我們需要知道當前使用者訪問我們的介面用的是什麼裝置，怎麼獲取呢？ var os = function (){ 　　var ua = navigator.userAgen

移動APP開發工作筆記002---Hbuilder js判斷當前裝置是安卓裝置還是蘋果裝置

   JAVA技術交流QQ群：170933152    js判斷是否為手機系統是安卓還是蘋果，是否為微信瀏覽器                  

js判斷變數是否是陣列（跨瀏覽器和ECMA）

在開發中，我們經常需要判斷某個物件是否為陣列型別，在Js中檢測物件型別的常見方法都有哪些呢？ typeof 操作符 對於Function， String， Number ，Undefined 等幾種型別的物件來說，他完全可以勝任，但是為Array時

js 判斷變數型別（完整版），包括ES6 新型別Symbol

歡迎來到Altaba的部落格...相信大家在開發中遇到需要判斷變數型別的問題，js變數按儲存型別可分為值型別和引用型別，值型別包括Undefined、String、Number、Boolean，引用型別包括object、Array、Function，具體差距請參閱本人另一部落

js判斷移動端是否安裝某款app的多種方法

lose wap androi var 運行 ipad http tee creat 第一種方法： 一:判斷是那種設備 var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1; /

JS判斷移動端還是PC、移動端px轉換成rem、移動端圓角

JS判斷移動端還是PC判斷PC還是移動if(/AppleWebKit.Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|L

JS判斷當前裝置是 PC IOS Andriod

JS判斷當前裝置是 PC IOS Andriod 程式碼如下： <script > window.onload = function(){ var isPc = IsPC(); var isAndroid = is_androi

js入門 關於js屬性及其資料型別（詳解）

1. js的本質就是處理資料。資料來自於後臺的資料庫。 所以變數就起到一個臨時儲存資料的作用。 ECMAScript制定了js的資料型別。 資料型別有哪些？ 1. 字串   String 2. 數字    Number

js判斷是否安裝某個app（android），沒有則下載

現在經常有寫場景需要提示使用者下載app, 但是如果使用者已經安裝，我們希望是直接開啟app。 實際上，js是沒有判斷app是否已經安裝的方法的，我們只能曲線救國。 首先，我們需要有call起app的schema, 已經下載地址，比如： var schema = 'myApp://main';

js判斷當前裝置是 Android 還是 iOS

//userAgent 屬性是一個只讀的字串，聲明瞭瀏覽器用於 HTTP 請求的使用者代理頭的值 var u = navigator.userAgent; //Android終端 var isAndroid = u.indexOf('Android') > -1 ||

Javascript 判斷移動裝置，以及iPhone, iPad手機 ios 板本 « 關於網路那些事...

推薦的方式 判斷移動裝置或版本的最佳方式，還是建議使用完整的 Library 若你需要一個快速可以套用在現成專案的作法，則可以參考下方: 判斷移動裝置 雖然這個

JS中六種資料型別（一）——Undefined

轉載自：http://blog.csdn.net/a2296096931/article/details/51072448 侵刪 JS中有6種資料型別：Undefined、Null、Boolean、Number、String和Object。JS中不支援任何建立自定義型別

JS中六種資料型別（五）——String

    String型別用於表示由零或多個16位Unicode字元組成的字元序列，即字串。字串可以由雙引號（“）或單引號（‘）表示，因此下面兩種字串的寫法都是有效的：     var firstNam

JS中六種資料型別（六）——Object

ECMAScript中的物件是可變的鍵控集合（即一組資料和功能的集合）。它將很多值聚合在一起，可通過名字訪問這些值。物件也可看做屬性的容器，每個屬性都是一個名/值對。屬性的名字可以是包括空字串在內的任

C#判斷檔案的真實型別（非副檔名判斷）

有時候我們需要真實驗證檔案的型別，通常網友上傳的檔案我們只通過副檔名來驗證，而副檔名是不靠譜的。我們可以通過檔案頭資訊，來驗證檔案是否是真實的某型別檔案，如下程式碼：publicstaticvoidCheckTrueFileName(){string path =@"D:\S

JS判斷移動端和pc端載入不同頁面

//pc端作判斷 <script> if (/mobile/i.test(navigator.userAgent)) { window.location = 'http://xxxx/mobile.html' } &l