触屏手机web界面技术调研

《触屏手机web界面技术调研》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、信雅达系统工程股份有限公司触屏手机web界面技术调研mohb1.前言随着技术的进步，如今智能手机已经全面走进了大屏幕、触摸屏的时代，传统的web页面的展示方式已经难以适应，而web设计的理念与技法也在不断发展，带给我们的挑战也越来越大，怎样以最合理的方式使设计方案能够最大程度地适应何种设备的性能与规格属性，提升应用的用户体验，这是我们在工作当中必须考虑的问题。鉴于触屏智能机爆发式发展的，各站点争相推出适于触屏手机访问的版本，我们称之为触屏版，也产生了许多适于手机的web层框架，此类框架能够简化应用的开发，降低开发难

2、度，减少开发维护成本。因此，使用此类框架几乎是大多数应用开发者的不二选择。本文分析了当下主流的移动web应用的前台主流框架及各大站点的技术使用情况，旨在指导信雅达手机银行产品touch版的开发。2.触屏版特点Touch版特点l所有主流移动浏览器提供一种统一体验，更适合触摸屏用户使用；l显示及输入方式模仿手机本地应用，让WebApp看起来像NativeApp手机银行应用需求l对于表单使用较多。有下拉选择、日期录入、密码录入、单选、复选l列表展示l反应速度l方便更改样式3.主流技术框架3.1jquerymobilejQ

3、ueryMobile是jQuery在手机上和平板设备上的版本，发布一个完整统一的jQuery移动UI框架。项目首页：http://jquerymobile.com/特点：l此框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScriptl持续增强和优雅降级同时支持高端和低端设备，比如那些没有JavaScript支持的设备，尽量提供最好的体验。l浏览器支持广泛页面展示：1.1senchatouch由现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿TouchWeb的SenchaT

4、ouch框架项目首页：http://www.sencha.com/products/touch/特点：l页面开发使用ExtJs，采用以JavaScript为核心的方法，通过编写JavaScript生成页面,基本上不需要写HTML。l支持ios及android页面展示：1.1JQ.MobijQ.Mobi是jQuery的部分重写版本，但针对HTML5和移动设备做了优化。项目首页：http://www.jqmobi.com/演示地址：http://www.jqmobi.com/testdrive/index.html特点

5、：l它的文件大小只有3KB，而jQuery则有35KB，并且据JSPerftest的数据，它在Android上要比jQuery快3倍，在iOS上快2.2倍苹果和安卓浏览器速度快，容量小，但效果对其他浏览器及其他手机系统支持可能不太好。l因为jQ.Mobi是插件式开发，所以它的编程语法和jQuery完全相同，jQ.Mobi只包含jQueryAPI的子集，也就是appMobi认为给iOS和Android提供完全相同用户体验最重要的那部分。l显示效果比jquerymobile略差。页面展示：1.1TheMprojectT

6、he-M-Project提供了一套可以编译成jQueryMobile对象的Widget项目首页：http://the-m-project.net/演示地址：http://the-m-project.net/apps/kitchensink/index.html特点：l完全JavaScript式的开发周期lThe-M-Project提供了一套可以编译成jQueryMobile对象的Widgetl更好的可定制性页面展示：1.1jQTouchjQTouch是一个jQuery的插件，主要用于手机上的Webkit浏览器上实现

7、一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript库。支持包括iPhone、Android等手机。项目首页：http://www.jqtouch.com/演示：http://www.jqtouch.com/preview/demos/main/l普通浏览器无法正常浏览l已是senchatouch一部分l提供动画、事件、ajax等，需自己定义样式l预置三种风格：apple，jqtouch，vanillal表单控件如：日期输入，输入框、单选、复选框没还是html的原始风格。1.2JoJo这个框

8、架可用于开发那支持HTML5的移动设备，如iOS,webOS,Android和ChromeOS等平台。它拥有标准，类原生的UI元素比如用于屏幕登录的Web表单控件，还有弹出小部件可用于在用户点击界面时提供一些额外的信息。项目首页：http://joapp.com/演示：http://joapp.com/demos.html特点：l使用JavaScript创建