WebApp触屏版网站开发要点

所谓的触屏版网站其实也是WebApp的一种展示形式，主要是依赖HTML+CSS+Javascript这三个关键因素来实现，相比较原生客户端程序来说优点就是开发周期短、升级简单、维护成本低,因为从根本上来说WebApp的本质就是一个网站而已。这里就说一下如何开发一个适合在触屏设备上展示的页面.

如果有在PC端开发网页的基础那么去处理手机端就很容易上手,这里介绍的是针对手持设备专门处理的页面,而不是媒体查询那种展示方式.

这里提供几个meta属性

使页面不可以认为放大缩小,喜欢用手指捏来捏去的童鞋要失望了.

使网站开启对web app程序的支持

在web app应用下状态条(屏幕顶部条)的颜色;

设置web app的放置主屏幕上icon文件路径,IOS系统添加到主屏幕那个图标,图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px)，ipad尺寸为72*72(px)

类似原生程序的启动画面,IOS有效,需把web app保存到桌面屏幕打开.

禁止一串数字变为可拨打号码

以上是常用的一些meta标签,应该可以满足大部分需求.

HTML:

如果是针对IOS或者高版本的android,HTML5是一个很不错的方案,如果需求需要支持一些山寨屌丝鸡,我的建议是不要使用太多HTML5的标签和API,屌丝不是屌丝可以控制的,所以作为一个屌丝开发者自然要做一个稳重的屌丝.

HTML5的属性还是很好用的,placeholder就是其中一个.

CSS:

现在你抛弃了IE,甚至抛弃了火狐,此刻你的心情一定又惊又喜.可以轻松的勾画出阴影和渐变,甚至可以使用可爱的css3动画.经测试在IOS下CSS3的渲染都非常给力,在一些中端安卓机型上CSS3的渲染有些偏差,CSS3动画明显不够流畅,这时候有两种解决方案,一种是平稳退化,一种是渐进增强,如何选择还得依照项目需求来定.

建议不要使用太多的CSS3效果,CSS3的渲染比较耗电,也会对性能造成一定的影响.

Javascript:

你仍然可以选择在PC端使用的jQuery库来从事手机端的页面开发，这不会造成太多硬性，但这里推荐使用一个叫zepto的小库来实现基本功能，麻雀虽小，鸡鸡俱全。

为什么不用jQuery Mobile?理由很简单，我需要一款白色时尚的鼠标，而你却买了一台MAC，鼠标我得到了，但是电脑和键盘我并不需要，这又是何必呢。

那我想用sencha touch?如果只是想做一个开发周期短、升级简单、维护成本低的纯web app，那就不建议使用ST，学习ST的时间都可以开发很多页面了。

要注意的是触屏的方法，jQuery没有提供bind(“swipe”)这样的方法，甚至jQuery Mobile提供的”swipe”方法竟然是那么戳，所以这里建议还是能自己按照提供的ontouchstart, ontouchmove, ontouchend三个事件来写一些类似PC端上的滚动效果,万变而不离其脑子。

性能：

这才是手机版的重头戏，在PC端因为硬件的强大和没有电量这个概念所有很容易忽视性能这个问题，在手机端性能问题被无限放大。

精简DOM结构，手机版的页面一般不会很复杂，用心筛选一定能筛选出很多通用的模块，这不但对整个项目有利，而且对性能也有很大的提升。

CSS3不是万能的，它只是一个工具，就像PS一样，有时候我们使用美图XX之类的软件就可以了，不必使用PS以显示自己的专业度。CSS3的渲染要比CSS2渲染性能低上很多，特别是CSS3动画，基本上是电量杀手，如果要用，建议缩小展示区域。使用CSS3的时候要在视觉和性能找一个平衡点，不过一般情况下都是视觉优先，因为去TM的电量，这关屌丝开发者啥事???

javascript是性能拦路虎，页面载入性能大多都卡在这里，合理的闭包，优秀的代码设计模式会化成一道彩色闪电亮瞎用户的手机屏幕，具体这里无法说的很详细，总之多测试就对了。