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的应用。

值得一提的是：不管使用哪种检测，都要保证“我们的应用不论运行在哪种平台，都要能很好地适应”；