Web Mobile應用開發平台檢測解決方案

Web Mobile App雖然可以跨平台，實作“一次編寫，處處運作”，但是有些時候不得不考慮目前的運作平台，例如移動裝置對CSS3，HTML5特性的支援情況就參差不齊。這種檢測一般有三種方法：

1）特性檢測（Feture）——檢測目前運作平台是否支援某一特性

2）浏覽器檢測（Browser）——檢測目前運作平台的浏覽器以及作業系統

3）形态因素檢測（Form Factor）——檢測目前運作平台，例如smartphone、TV

下面我們一一介紹

一、特性檢測

這種方式非常流行，思想就是如果支援該特性就使用，否則就不使用，用其它方案代替。例如：

detectCanvas() ? showGraph() : showTable();
function detectCanvas() {
  var canvas = document.createElement("canvas");
  return !!canvas.getContext;
}           

我們可以簡單的通過這種方式來檢測大多數特性，高興的是，目前已經有架構為我們做了這些事情——Modernizr，如果用該架構，代碼可以以如下方式寫：

Modernizr.canvas ? showGraph() : showTable();           

  特性檢測不僅僅局限于JavaScript，在Css中也會用到，如media queries，我們可以檢測螢幕大小，例如：

@media screen and (min-width: 400px) {
  //螢幕尺寸大于400px的時候需要應用的樣式
}           

media queries的具體用法可以參見：

https://developer.mozilla.org/En/CSS/Media_queries

http://peter.sh/2010/11/multiple-profiles-the-matchmedia-interface-and-locally-modified-files/

二、浏覽器檢測

浏覽器檢測的應用程度不及特性檢測，但是在某些場合先仍會使用。

在20世紀90年的“浏覽器大戰”中，微軟（Microsoft）和網井（Netscape）持續不斷地增加各自浏覽器的特性，是以浏覽器檢測開始流行起來。如果是IE5，那麼使用XMLHttpRequest，否則使用iFrame。如果隻有IE5支援XMLHttpRequest那麼這種檢測是非常值得的。

浏覽器檢測一般都會檢測 browser/version/OS，因為這三者才能決定是否支援某一特性，例如如果是mobile safari，我們就可以将UI做成類似native那樣。

怎麼進行浏覽器檢測呢？上面提到的三種因素都可以通過UserAgent得到，想要資訊越精确，實作程度就越難，前端和伺服器端都可以得到該對象。JavaScript版可以參見：http://www.quirksmode.org/js/detect.html

UserAgent對象随着浏覽器種類的增加也會變的越來越複雜，而且有些浏覽器它不走尋常路，得不到什麼可靠的資訊，是以在mobile web開發中不推介使用這種方式檢測。

三、形态因素檢測

該方法是在2011年的Google IO會議上提出的，概念和使用上都比較新。提出者認為我們的應用應該盡量符合每個平台上的使用者的使用習慣，例如在Android上就有實體按鍵傳回鍵，在iPhone上就沒有。但是注意這并不是要針對每個平台進行獨自開發，而是已一種MVC的方式進行開發，Model層和Controller層不變，變的是view層（針對各個平台的視圖在變），這樣保證了代碼的複用。

應用形态因素檢測中的架構，可以很容易地管理各個平台的視圖（View），當然在各自的視圖裡我們仍然可以使用特性檢測和浏覽器檢測。

FormFactor開源項目位址：https://github.com/PaulKinlan/formfactor

總結

現代的Web開發不僅僅隻是在桌面浏覽器上開發，使用者會在各種裝置上進行通路，目前通過HTML5可以滿足絕大數需求，作為開發者，要盡量使應用适應各個環境，要充分利用運作環境的特性，并且要符合使用者的使用習慣。是以第一步要做的就是平台檢測，即本文所談到的。

浏覽器檢測已經不再那麼流行，因為使用它的目的還是用來檢測是否有某些特性，但是這通過特性檢測可以很容易做到的。

形态因素檢測适用于有多種UI的應用。

值得一提的是：不管使用哪種檢測，都要保證“我們的應用不論運作在哪種平台，都要能很好地适應”；