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