通過userAgent識别移動裝置，自動跳轉移動端站點

不少網際網路公司的網站都分為PC端和手機端。如果使用者用手機通路PC站點，受限于手機網絡，很可能會出現加載網頁緩慢的情況。

是以，如何識别使用者通路網站的裝置，并且自動跳轉到對應的站點呢？

navigator.userAgent

navigator是JavaScript中的一個獨立的對象，用于提供使用者所使用的浏覽器以及作業系統等資訊，以navigator對象屬性的形式來提供。所有浏覽器都支援該對象。

navigator對象有一個userAgent屬性，會傳回使用者的裝置作業系統和浏覽器的資訊。

1.用

谷歌浏覽器

，随便打開一個網頁，

F12

打開Chrome調試工具，輸入

navigator.userAgent

, 會傳回如下的字元串：

"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36"
           

這個字元串可以分成四個主要的部分，我來解釋一下各個部分的含義：

1）Mozilla/5.0 ：表示相容Mozilla, 幾乎所有的浏覽器都有這個字元;
2) (Windows NT 6.1; Win64; x64): 表示裝置的作業系統版本，以及CPU資訊；
3）AppleWebKit/537.36 (KHTML, like Gecko)：表示浏覽器的核心；
4) Chrome/57.0.2987.98 Safari/537.36: 表示浏覽器的版本号。
           

2.用

火狐浏覽器

，随便打開一個網頁，

F12

打開調試工具，同樣地在控制台輸入

navigator.userAgent

, 傳回如下的字元串：

"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0"
           

與之前的結果差別：

1)浏覽器核心是Gecko核心，
2)浏覽器版本是火狐的Firefox/52.0。從這裡我們可以看出火狐浏覽器是基于Gecko核心。
           

3.用

谷歌浏覽器

模拟

手機

通路，選擇

iPhone6s

，同樣在調試工具控制台輸入

navigator.userAgent

, 會傳回如下的字元串：

"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"
           

注意看出現了

iPhone

。

4.用

谷歌浏覽器

模拟

平闆裝置

通路，選擇

iPad

，同樣在調試工具控制台輸入

navigator.userAgent

, 會傳回如下的字元串：

"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"
           

注意看出現了

iPad

。

5.用

谷歌浏覽器

模拟

安卓裝置

，比如選擇

Galaxy S5

，同樣在調試工具控制台輸入

navigator.userAgent

, 會傳回如下的字元串：

"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"
           

注意看出現了

Android

。

6.用

谷歌浏覽器

模拟

winPhone裝置

，比如選擇

Microsoft Lumia 950

，同樣在調試工具控制台輸入

navigator.userAgent

, 會傳回如下的字元串：

"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"
           

注意看出現了

Windows Phone

。

通過以上的小測試，我們還可以能夠發現一個規律：手機和平闆裝置通路時，

navigator.userAgent

傳回的字元串都會包含

Mobile

。

userAgent的用途：識别手機、平闆裝置

剛才我們已經看到了手機和平闆裝置通路時，

navigator.userAgent

傳回的字元串都會包含

Mobile

，可以利用這一點，來實作文章開頭提出的需求，自動識别使用者通路裝置進而跳轉對應的站點。

PC端站點可以加上如下代碼，自動跳轉到移動端站點

var ua = navigator.userAgent.toLowerCase();
if (/mobile|android|iphone|ipad|phone/i.test(ua)) {
   window.location.href = "http://m.example.com";
}
           

如果在

微信

中打開和在

手機浏覽器

打開網頁執行的是不同的腳本的話，還可以通過

userAgent

來判斷是否是在

微信

中打開的。

var ua = navigator.userAgent.toLowerCase();
if(/micromessenger/i.test(ua){
    //to do
}
           

轉載于https://www.jianshu.com/p/8dc8f79b4496