前段时间负责了公司的wap站前端工作,目前wap站的基础及较为复杂的几张页面都已经出来,现根据自己的一些经验,贴出部分心得,希望对现在或者以后可能会接触到Wap站的一些人有些帮助
一、本次WAP网站的设计尺寸640*,个人感觉采用640px宽度是较好的选择,主要有以下几点原因:
1、现在主流手机的物理尺寸都在320-640之间,这样通过设置viewport属性,可以实现在多数屏幕上适应,其中设置方法
<meta content="width=device-width, initial-scale=XXXX, maximum-scale=1, user-scalable=no" name="viewport" />(iphone)
<meta content="width=device-width, target-densitydpi=XXXX, user-scalable=no" name="viewport" />(android)
2、采用该尺寸,在ipad设备上设置initial-scale=1,也可以正常浏览,最近看了m.taobao.com,他采用的尺寸是320的,在ipad上显示的就过小
其中对640尺寸的布局,建议采用20-600-20,即左右padding: 20px,主体内容为600px
二、对wap站的js库函数,我以为在不是对swipe、tab等滑动事件有强烈需求的话,不要引入js库函数,原生的js+html5+css3基本上可以实现多数的流畅效果,现在网上推荐的框架有zepto.js、jquery-mobile、sencha touch等,其中我对比了zepto.js和jquery-mobile,感觉mobile太大,zepto要是引入event.js和touch.js也不小,而且zepto-core + event + touch实用性也不高;css3中的transition、transform、animation等新的属性,对动态效果的实现基本已没有什么问题,所以建议最好不要引库函数。