JS如何判斷瀏覽器類型，如何模擬瀏覽器類型（模擬微信瀏覽器）

一、前言

　　在編寫前端代碼時，為了頁面兼容性，我們往往需要考慮不同的瀏覽器類型

　　而這就需要在前端代碼中進行識別和區分

　　接下來就來談談對瀏覽器類型的識別

 

二、正文

（一）、查看瀏覽器類型的核心代碼

var u = navigator.userAgent;

在瀏覽器的控制台中輸入navigator.userAgent即可查看當前瀏覽器的信息

以此，我們可以通過navigator.userAgent來進行簡單初步的瀏覽器信息查詢

 

（二）、通過代碼進行系統的瀏覽器識別

var browser = { ua: function () { var u = navigator.userAgent; var u2 = navigator.userAgent.toLowerCase(); var isChrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/); var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/); var iosVersion = function () { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; } }(); var chromeVersion = function () { var chrome = (navigator.userAgent).match(/Chrome\/(\d+)\./); if (chrome) { return parseInt(chrome[1], 10); } }(); 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應該程序，沒有頭部與底部
            weixin: u2.match(/MicroMessenger/i) == "micromessenger",//是否微信
            UC: u.indexOf('UCBrowser'), chrome: u.indexOf('Chrome') > -1, windowsPhone: u.indexOf('Windows Phone') > -1, samsung: u.indexOf('Samsung') > -1, QQ: u.match(/\sQQ/i) != null ? u.match(/\sQQ/i).toLowerCase() == "qq" : false, isChrome: isChrome, isAndroid: isAndroid, iosVersion: iosVersion, chromeVersion: chromeVersion }; }() }

下面來測試一下：

注意： QQ瀏覽器和QQAPP內置瀏覽器判斷有問題，具體看本文https://www.cnblogs.com/nangezi/p/10830257.html 

另外： u.match(/\sQQ/i).toLowerCase() == "qq" 有誤，不能再match()后使用toLowerCase()，因為match()返回的是數組

 

（三）、在chrome上模擬其他的瀏覽器（以微信為例）

1、先了解安卓微信和Ios微信的userAgent（User agent：用戶代理）

安卓微信UA： mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30 micromessenger/5.0.1.352  

Ios微信UA：  mozilla/5.0 (iphone; cpu iphone os 5_1_1 like mac os x) applewebkit/534.46 (khtml, like gecko) mobile/9b206 micromessenger/5.0 

 

 2、打開chrome的調試工具，點擊右上角的菜單按鈕——More Tools——Network condition打開Network condition窗口（會顯示在下方的控制台（console）旁邊）

 

3、 User agent選項，勾掉Select automatically，選擇Custom（自定義），然后在下面的文本框中輸入Android或者ios的用戶代理（User Agent）就可以了

 

4、下面來測試一下

//判斷是否在微信中
var u = navigator.userAgent.toLowerCase(); u.match(/Micromessenger/i) == "micromessager";

綜上所述，即可完成對不同瀏覽器類型的模擬，這種方式多用於微信。。。

 

 三、結語

。。。