PHP 行動裝置偵測

跟河堤分館借的這本旗標出版 "新觀念 PHP+MySQL+AJAX 網頁設計範例教本 第四版" 快到期了 :

稍微翻閱了一下, 發現其中第 15 章有關 PHP 行動偵測的功能還蠻有用的, 我重新整理並記錄如下 :

要言之, 它是利用 PHP 的系統變數 HTTP_USER_AGENT (使用者代理) 來辨別用戶端設備, 如果是行動裝置 (手機, 平板) 就導引至行動版網頁; 否則就顯示電腦版網頁, 架構如下 :

default.php
      |  
      |____ desktop
      |              |____ index.htm
      |
      |____ mobile
                     |____ index.htm
                   

也就是在網站根目錄下建立兩個子目錄 : desktop 與 mobile, 分別放置電腦版與行動版網頁. 然後在首頁default.php 中用一個自訂函數 is_mobile() 來判別用戶終端設備是否為行動裝置 :

if (is_mobile()) {header("Location: mobile/index.htm");}
else {header("Location: desktop/index.htm");}

這個 is_mobile() 函數利用系統變數 $_SERVER["HTTP_USER_AGENT"] 取得用戶端設備名稱, 如果是用桌電的瀏覽器瀏覽網頁, 則它會傳回如下字串 :

Mozilla/4.0 (compatible;)
Mozilla/5.0 (Windows NT 6.1; rv:6.0) Gecko/20110814 Firefox/6.0 Google favicon
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36

如果是手機或平板, 它會傳回如下含有行動裝置名稱的字串 :

Mozilla/5.0 (Linux; Android 4.4.2; H30-L02 Build/HonorH30-L02) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 (華為 Android 手機)

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53 (iPad)

因此只要用 preg_match() 函數去判斷裡面是否含有 android,  ipad, 或 iphone 等字串即可判斷用戶終端是否為行動裝置 :

function is_mobile() {
  $device='/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|'.
          'docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|'.
          'midp|mini|mmp|mobi|motorola|nokia|palm|panasonic|philips|'.
          'phone|sagem|sharp|smartphone|sony|symbian|t-mobile|telus|'.
          'vodafone|wap|webos|wireless|xda|xoom|zte)/i';
  if (preg_match($device, $_SERVER['HTTP_USER_AGENT'])) {return true;}
  else {return false;}
  }

這裡 $device 變數是一個包含各種手機平板廠牌名稱的關鍵字組成的正規表達式, 這些關鍵字會出現在行動裝置瀏覽器傳回伺服器的系統變數 HTTP_USER_AGENT 中, 因此只要用 preg_match() 檢查是否含有這些關鍵字即可.

此處因測試網站已有 default.php, 因此我把上面的程式改為 mobile_detect.php, 而 mobile 目錄下的行動版網頁, 取自之前測試 jQuery Mobile 的文章 "jQuery Mobile 測試 (一) : 環境佈置與頁面控制" 的測試範例 2, 但 jQuery Mobile 函式庫改為取自 CDN. 而 desktop 目錄下的電腦版網頁 index.htm 取自 "jQuery EasyUI 測試 : Datagrid (一)" 的測試範例 4.

測試範例 1 : http://mybidrobot.allalla.com/mobile_detect.php [看原始碼]
測試範例 2 : http://mybidrobot.allalla.com/desktop/index.htm [看原始碼]
測試範例 3 : http://mybidrobot.allalla.com/mobile/index.htm [看原始碼]

上面範例 1 會依據前端是否為行動裝置自動導引至適當版本網頁, 例如在手機上點範例 1 結果為 :

而在筆電上點範例 1 則為 :

可見會自動判別. 範例 2 與 3 則是直接存取目的網頁.

參考資料 :

# 如何利用PHP語法來偵測是不是使用手機瀏覽網頁
# mobiledetect
# http://detectmobilebrowsers.com/