Mobile Web 前端技術筆記(三): User Agent Sniffing

User Agent Sniffing

《基礎》

行動版網站和桌機版網站,使用的情境和需求都不同,現在大部分網站傾向把兩者分開,將使用行動裝置的user儘早redirect到行動版。用user agent string來分流不算是最好的方法,一來user agent的字串有可能是假的,二來瀏覽器和行動裝置日新月異,每當有新型號出品時,都有可能產生前所未見的user agent string。

單單使用media queries應付五花八門的裝置尺寸,在某些情況下會變得相當複雜(就像我雖然蠻喜歡7吋的Galaxy Tab,但它在開發上鐵定會成為一個頭痛的東西),這時User Agent Sniffing就成了目前少數有效的幾個方法之一。

Mobile Browser會將所有與 User Agent相關的資訊包含在User Agent String裡(平台、OS、瀏覽器、版本等),前端的User Agent Sniffing通常用javascript來做,藉由javascript偵測User Agent String裡的關鍵字眼,來做相應的處理,如redirect到行動版網站、指定特定的CSS、或在javascript做DOM操作時執行不同的動作

目前熱門行動的裝置的User Agent String:

  1. iPad: 有兩個,擇一使用
    (1) 

    Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

    (2)

    Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

     

  2. iPod
    Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

     

  3. iPhone
    Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

     

  4. Android上的瀏覽器
    Android系統的行動裝置幾乎都有“Android”字眼,且多搭配webkit引擎的瀏覽器,所以可用這兩者作為關鍵字

而Apple產品的User Agent String幾乎都包含iPhone字眼。

《用法》

Javascript

iPod touch和 iPhone用同樣的排版還說得過去,但小型裝置的版面設定可能就不適合iPad。幸好iPad的平台關鍵字是不變的,用以下偵測平台的方式即可:

   1: function isIPad(){
   2:     return navigator.platform == ""iPad"";
   3: }

執行完這個運算後會傳回true或false,再指定true或false各自的後續動作。

關於User Agent Sniffing,David Walsh這位Web Developer寫出許多有用的javascript片段,例如:

  • 偵測iPad的User Agent String
   1: // For use within normal web clients
   2: var isiPad = navigator.userAgent.match(/iPad/i) != null;
   3: // For use within iPad developer UIWebView
   4: var ua = navigator.userAgent;
   5: var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

用match、indexOf或test來尋找navigator.userAgent裡面有沒有任何包含ipad的字眼,然後傳回true或false。

*註:navigator.userAgent.match(/iPad/i),其中/…/i 是正規表示法中的case insensitive,指的是兩斜線內的字串不分大小寫的意思

  • 偵測iPhone或iPod的User Agent String
   1: if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   2:    if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
   3: }
  • 偵測Android的 User Agent String
   1: var ua = navigator.userAgent.toLowerCase();
   2: var isAndroid = ua.indexOf("android");
   3: if(isAndroid) {
   4:   // Do something!
   5:   // Redirect to Android-site?
   6:   window.location = 'http://android.davidwalsh.name';
   7: }

在後端寫PHP來偵測,原理也是一樣的,就不把code貼過來了。

.htaccess

另外還有在.htaccess裡設定的,.htaccess是在Apache HTTP Server下的一個對於系統目錄進行各種權限規則設置的文件,最常見的是設置404頁面,301轉向等等,http://dev-tips.com/featured/redirect-iphone-blackberry-palm-requests-with-htaccess 有一份.htaccess設置的實例:

   1: #redirect mobile browsers
   2: RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
   3: RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
   4: RewriteCond %{HTTP_USER_AGENT} ^.*BlackBerry.*$
   5: RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
   6: RewriteCond %{HTTP_USER_AGENT} ^.*Palm.*$
   7: RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]

《資料來源》

  1. http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
  2. http://davidwalsh.name/detect-ipad
  3. http://davidwalsh.name/detect-android
  4. http://davidwalsh.name/detect-iphone
  5. .htaccess設置實例http://dev-tips.com/featured/redirect-iphone-blackberry-palm-requests-with-htaccess
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s