PC端、手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)的JS插件devie.js

發(fā)布時(shí)間：2018-09-08 16:26:21

發(fā)布者：xueye

瀏覽量:

現(xiàn)在移動(dòng)端的流行及流量占比越來(lái)越高，我們的很多客戶在做網(wǎng)站的時(shí)候都希望我們附帶把移動(dòng)網(wǎng)站一并做出來(lái)，那么就會(huì)遇到一些問(wèn)題，比如給客戶發(fā)的是移動(dòng)版網(wǎng)址，但是客戶從電腦端打開(kāi)的，或者是給客戶發(fā)的電腦端網(wǎng)址客戶從移動(dòng)端打開(kāi)的，都會(huì)導(dǎo)致比例變形或無(wú)法做到完美展現(xiàn)的情況。

乾乙小兒推拿識(shí)別案例.jpg

當(dāng)然以上問(wèn)題在我們文匯軟件的項(xiàng)目中是不存在的，我們現(xiàn)在識(shí)別移動(dòng)端有三種方法，一種是通過(guò)PHP語(yǔ)言來(lái)進(jìn)行識(shí)別終端，然后根據(jù)終端設(shè)備匹配對(duì)應(yīng)規(guī)則展現(xiàn)對(duì)應(yīng)版本網(wǎng)站；第二種是通過(guò)web服務(wù)器來(lái)進(jìn)行終端識(shí)別，我們的web服務(wù)器一般為apache和nginx，也是可以完美識(shí)別終端的；以上兩種方法技術(shù)難度較高，一般不容易掌握，我們本文介紹的就是通過(guò)前端來(lái)進(jìn)行終端的識(shí)別。

我們本文中介紹的device.js，是一個(gè)可以用來(lái)檢測(cè)設(shè)備的平臺(tái)、操作系統(tǒng)和方向的JavaScript庫(kù)，device可以判斷操作系統(tǒng)比如 iOS，安卓，黑莓，Windows，F(xiàn)irefox OX，判斷屏幕的方向橫屏或者豎屏，屬于移動(dòng)設(shè)備還是平板設(shè)備，是一個(gè)功能比較齊全的JavaScript庫(kù)。

下面我們來(lái)舉例說(shuō)明這個(gè)device的用法，首先需要在頁(yè)面中引用以下代碼，將device加載至html中。

如果我們需要判斷當(dāng)前打開(kāi)的頁(yè)面是否為移動(dòng)端我們需要如下寫(xiě)法

這段代碼需要增加至PC版本的頁(yè)面中，如果終端為移動(dòng)設(shè)備，則自動(dòng)跳轉(zhuǎn)至對(duì)應(yīng)的移動(dòng)版本網(wǎng)站中，如果不為移動(dòng)端設(shè)備則不跳轉(zhuǎn)。

這段代碼需要增加至移動(dòng)版本的頁(yè)面中，如果終端為PC設(shè)備，則自動(dòng)跳轉(zhuǎn)至PC版本網(wǎng)站中，否則不跳轉(zhuǎn)。其實(shí)就是這么簡(jiǎn)單的操作即可完成對(duì)應(yīng)的識(shí)別，除此之外還可以判斷平板設(shè)備，或操作系統(tǒng)均可，下面簡(jiǎn)單列舉了一些可判斷識(shí)別的參數(shù)，供大家在使用時(shí)借鑒。

**Device** **JavaScript Method**

Mobile device.mobile()

Tablet device.tablet()

Desktop device.desktop()

iOS device.ios()

iPad device.ipad()

iPhone device.iphone()

iPod device.ipod()

Android device.android()

Android Phone device.androidPhone()

Android Tablet device.androidTablet()

BlackBerry device.blackberry()