不少互聯(lián)網(wǎng)公司的網(wǎng)站都分為PC端和手機(jī)端缩歪。如果用戶用手機(jī)訪問PC站點(diǎn)，受限于手機(jī)網(wǎng)絡(luò)谍憔，很可能會(huì)出現(xiàn)加載網(wǎng)頁(yè)緩慢的情況匪蝙。
因此，如何識(shí)別用戶訪問網(wǎng)站的設(shè)備习贫，并且自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的站點(diǎn)呢逛球？
navigator.userAgent
navigator是JavaScript中的一個(gè)獨(dú)立的對(duì)象，用于提供用戶所使用的瀏覽器以及操作系統(tǒng)等信息苫昌，以navigator對(duì)象屬性的形式來提供颤绕。所有瀏覽器都支持該對(duì)象。
navigator對(duì)象有一個(gè)userAgent屬性祟身，會(huì)返回用戶的設(shè)備操作系統(tǒng)和瀏覽器的信息奥务。
1.用谷歌瀏覽器，隨便打開一個(gè)網(wǎng)頁(yè)袜硫，F12打開Chrome調(diào)試工具氯葬，輸入navigator.userAgent, 會(huì)返回如下的字符串：
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36"
這個(gè)字符串可以分成四個(gè)主要的部分，我來解釋一下各個(gè)部分的含義：
1）Mozilla/5.0 ：表示兼容Mozilla, 幾乎所有的瀏覽器都有這個(gè)字符;
2) (Windows NT 6.1; Win64; x64): 表示設(shè)備的操作系統(tǒng)版本婉陷，以及CPU信息帚称；
3）AppleWebKit/537.36 (KHTML, like Gecko)：表示瀏覽器的內(nèi)核；
4) Chrome/57.0.2987.98 Safari/537.36: 表示瀏覽器的版本號(hào)憨攒。
2.用火狐瀏覽器世杀，隨便打開一個(gè)網(wǎng)頁(yè)，F12打開調(diào)試工具肝集，同樣地在控制臺(tái)輸入navigator.userAgent, 返回如下的字符串：
"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0"
與之前的結(jié)果區(qū)別：
1)瀏覽器內(nèi)核是Gecko內(nèi)核，
2)瀏覽器版本是火狐的Firefox/52.0蛛壳。從這里我們可以看出火狐瀏覽器是基于Gecko內(nèi)核杏瞻。
3.用谷歌瀏覽器模擬手機(jī)訪問所刀，選擇iPhone6s，同樣在調(diào)試工具控制臺(tái)輸入navigator.userAgent, 會(huì)返回如下的字符串：
"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"
注意看出現(xiàn)了iPhone捞挥。
4.用谷歌瀏覽器模擬平板設(shè)備訪問浮创，選擇iPad，同樣在調(diào)試工具控制臺(tái)輸入navigator.userAgent, 會(huì)返回如下的字符串：
"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"
注意看出現(xiàn)了iPad砌函。
5.用谷歌瀏覽器模擬安卓設(shè)備斩披，比如選擇Galaxy S5，同樣在調(diào)試工具控制臺(tái)輸入navigator.userAgent, 會(huì)返回如下的字符串：
"Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Mobile Safari/537.36"
注意看出現(xiàn)了Android讹俊。
6.用谷歌瀏覽器模擬winPhone設(shè)備垦沉，比如選擇Microsoft Lumia 950，同樣在調(diào)試工具控制臺(tái)輸入navigator.userAgent, 會(huì)返回如下的字符串：
"Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263"
注意看出現(xiàn)了Windows Phone仍劈。
通過以上的小測(cè)試厕倍，我們還可以能夠發(fā)現(xiàn)一個(gè)規(guī)律：手機(jī)和平板設(shè)備訪問時(shí)，navigator.userAgent返回的字符串都會(huì)包含Mobile贩疙。
userAgent的用途：識(shí)別手機(jī)讹弯、平板設(shè)備
剛才我們已經(jīng)看到了手機(jī)和平板設(shè)備訪問時(shí)，navigator.userAgent返回的字符串都會(huì)包含Mobile这溅，可以利用這一點(diǎn)组民，來實(shí)現(xiàn)文章開頭提出的需求，自動(dòng)識(shí)別用戶訪問設(shè)備從而跳轉(zhuǎn)對(duì)應(yīng)的站點(diǎn)悲靴。
PC端站點(diǎn)可以加上如下代碼臭胜，自動(dòng)跳轉(zhuǎn)到移動(dòng)端站點(diǎn)
var ua = navigator.userAgent.toLowerCase();
if (/mobile|android|iphone|ipad|phone/i.test(ua)) {
window.location.;
}
如果在微信中打開和在手機(jī)瀏覽器打開網(wǎng)頁(yè)執(zhí)行的是不同的腳本的話，還可以通過userAgent來判斷是否是在微信中打開的对竣。
var ua = navigator.userAgent.toLowerCase();
if(/micromessenger/i.test(ua){
//to do
}
本文首發(fā)于Frank Wang的個(gè)人博客, 轉(zhuǎn)載時(shí)請(qǐng)附上原文鏈接http://www.wangxingfeng.com/useragent/
