現(xiàn)在移動(dòng)端的流行及流量占比越來越高,我們的很多客戶在做網(wǎng)站的時(shí)候都希望我們附帶把移動(dòng)網(wǎng)站一并做出來,那么就會(huì)遇到一些問題,比如給客戶發(fā)的是移動(dòng)版網(wǎng)址,但是客戶從電腦端打開的,或者是給客戶發(fā)的電腦端網(wǎng)址客戶從移動(dòng)端打開的,都會(huì)導(dǎo)致比例變形或無法做到完美展現(xiàn)的情況。
當(dāng)然以上問題在我們文匯軟件的項(xiàng)目中是不存在的,我們現(xiàn)在識別移動(dòng)端有三種方法,一種是通過PHP語言來進(jìn)行識別終端,然后根據(jù)終端設(shè)備匹配對應(yīng)規(guī)則展現(xiàn)對應(yīng)版本網(wǎng)站;第二種是通過web服務(wù)器來進(jìn)行終端識別,我們的web服務(wù)器一般為apache和nginx,也是可以完美識別終端的;以上兩種方法技術(shù)難度較高,一般不容易掌握,我們本文介紹的就是通過前端來進(jìn)行終端的識別。
我們本文中介紹的device.js,是一個(gè)可以用來檢測設(shè)備的平臺(tái)、操作系統(tǒng)和方向的JavaScript庫,device可以判斷操作系統(tǒng)比如 iOS,安卓,黑莓,Windows,F(xiàn)irefox OX,判斷屏幕的方向橫屏或者豎屏,屬于移動(dòng)設(shè)備還是平板設(shè)備,是一個(gè)功能比較齊全的JavaScript庫。
下面我們來舉例說明這個(gè)device的用法,首先需要在頁面中引用以下代碼,將device加載至html中。
如果我們需要判斷當(dāng)前打開的頁面是否為移動(dòng)端我們需要如下寫法
這段代碼需要增加至PC版本的頁面中,如果終端為移動(dòng)設(shè)備,則自動(dòng)跳轉(zhuǎn)至對應(yīng)的移動(dòng)版本網(wǎng)站中,如果不為移動(dòng)端設(shè)備則不跳轉(zhuǎn)。
這段代碼需要增加至移動(dòng)版本的頁面中,如果終端為PC設(shè)備,則自動(dòng)跳轉(zhuǎn)至PC版本網(wǎng)站中,否則不跳轉(zhuǎn)。其實(shí)就是這么簡單的操作即可完成對應(yīng)的識別,除此之外還可以判斷平板設(shè)備,或操作系統(tǒng)均可,下面簡單列舉了一些可判斷識別的參數(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()
BlackBerry Phone device.blackberryPhone()
BlackBerry Tablet device.blackberryTablet()
Windows device.windows()
Windows Phone device.windowsPhone()
Windows Tablet device.windowsTablet()
Firefox OS device.fxos()
Firefox OS Phone device.fxosPhone()
Firefox OS Tablet device.fxosTablet()
MeeGo device.meego()
Television device.television()