一、通過navigator.userAgent來進行瀏覽器類型判斷
1. 定義和用法
????????userAgent 屬性是一個只讀的字符串，聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值。
????????一般來講，它是在 navigator.appCodeName 的值之后加上斜線和 navigator.appVersion 的值構(gòu)成的。
????????例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。
????????注：用戶代理頭：user-agent header。
2. 語法
navigator.userAgent
3. navigator.userAgent使用場景
1）判斷是Android或者iOS
/**
* 判斷瀏覽器類型：Android/iOS
*/
function getOSType() {
? if (/(Android)/i.test(navigator.userAgent)) {
? ? return 'Android'
? } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
? ? return 'iOS'
? }
}
2）判斷是否是微信瀏覽器
function is_weixin(){
? if (/(micromessenger)/i.test(navigator.userAgent)) {
? ? return true
? } else {
? ? return false
? }
}
3）判斷是否是QQ瀏覽器
function is_qq(){
? if (/(MQQBrowser)/i.test(navigator.userAgent)) {
? ? return true
? } else {
? ? return false
? }
}
4）判斷是手機端、平板還是PC
var os = function (){
? ? var ua = navigator.userAgent,
? ? isWindowsPhone = /(?:Windows Phone)/.test(ua),
? ? isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
? ? isAndroid = /(?:Android)/.test(ua),
? ? isFireFox = /(?:Firefox)/.test(ua),
? ? isChrome = /(?:Chrome|CriOS)/.test(ua),
? ? isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
? ? isPhone = /(?:iPhone)/.test(ua) && !isTablet,
? ? isPc = !isPhone && !isAndroid && !isSymbian;
? ? return {
? ? ? ? isTablet: isTablet,
? ? ? ? isPhone: isPhone,
? ? ? ? isAndroid: isAndroid,
? ? ? ? isPc: isPc
? ? };
}();
if (os.isAndroid || os.isPhone) {
? console.log("手機")
} else if (os.isTablet) {
? console.log("平板")
} else if(os.isPc) {
? console.log("電腦")
}
4. navigator.userAgent格式
部分瀏覽器格式如下（PC）：
1）chrome瀏覽器：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
2）IE11瀏覽器：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko
3）safari 5.1 – MAC：User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
4）safari 5.1 – Windows：User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
5）Firefox 4.0.1 – MAC：User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
6）Firefox 4.0.1 – Windows：User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
7）Opera 11.11 – MAC：User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11
8）Opera 11.11 – Windows：User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
9）360瀏覽器：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)
10）搜狗瀏覽器 1.x：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0; .NET CLR 2.0.50727; SE 2.X MetaSr 1.0)
部分瀏覽器格式如下（移動端）：
1）iphone6：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
2）ipad：Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
3）Android QQ瀏覽器 For android：User-Agent: MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
4）Windows Phone：User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)
5）BlackBerry：User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+
6）UC標準：User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999
二、通過navigator.platform來進行瀏覽器類型判斷
因為各大瀏覽器廠商可以對navigator.userAgent進行設(shè)置，導(dǎo)致了userAgent格式的混亂。例如：華為mate10 默認瀏覽器 userAgent的信息如下：
Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.89 Safari/537.36
結(jié)果可想而知，根據(jù)userAgent做出的判斷：當前瀏覽器類型為PC。所以需要在通過navigator.userAgent判斷的基礎(chǔ)上再對navigator.platform進行判斷，以此來確保瀏覽器類型判斷的準確性。
1. 定義和用法
?platform 屬性是一個只讀的字符串，聲明了運行瀏覽器的操作系統(tǒng)和（或）硬件平臺。
2. 語法
navigator.platform
3. navigator.platform使用場景
1）判斷是Android或者iOS
/**
* 判斷是Android或者iOS
*/
function getPlatformType() {
? if ('Android' === navigator.platform) {
? ? return 'Android'
? } else if ('iPhone' === navigator.platform || 'iPod' === navigator.platform || 'iPad' === navigator.platform) {
? ? return 'iOS'
? }
}
2）navigator.platform返回的可能值
? ? ? ? ?> HP-UX
? ? ? ? ?> Linux i686
? ? ? ? ?> Linux armv7l
? ? ? ? ?> Mac68K
? ? ? ? ?> MacPPC
? ? ? ? ?> MacIntel
? ? ? ? ?> SunOS
? ? ? ? ?> Win16
? ? ? ? ?> Win32
? ? ? ? ?> WinCE
? ? ? ? ?> iPhone
? ? ? ? ?> iPod
? ? ? ? ?> iPad
? ? ? ? ?> Android
? ? ? ? ?>黑莓
? ? ? ? ?>歌劇
三、通過屏幕尺寸來進行瀏覽器類型判斷
通過屏幕大小可以判斷瀏覽器類型，獲取屏幕寬度的方法如下：
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁可見區(qū)域高：document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)
