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

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

你可能感兴趣的:(html5,mobile web,Browser Detect)