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