Skip to content


wap网站开发总结

有的地方叫手机网站,手机网站定义有点大(搜索手机网站首先出来的就是卖手机,手机资讯),所以在这里称wap网站。
从目前来看有少数直接用的web页面当wap页面用。
随着无线的发展,我相信有线无线一体化肯定也是一种趋势。
从测试结果来看,web页面兼容问题比较多。
现阶段情况下,建议使用wml/xhtml mp开发wap站点
wml比较简单,这里主要谈xhtml mp类的网站开发情况。
主要简单列一下wap开发的大概知识,希望对即将进入wap开发人员有些帮助。

wml/xhtml介绍
wap网站面临的现实问题
手机操作系统介绍
手机浏览器介绍
常见兼容问题介绍
页面优化介绍

什么是wml?(wap1.0)

什么是xhtml mp?(wap2.0)

在开发wap站点的时候遇到几大问题
1.参考资料缺乏
2.测试环境复杂不完善
3.浏览器种类繁多

xhtml tag标签分析
我们从20大网站取样进行相关tag分析
样本数量:92300
在xhtml mp中我们基本上只用到前面排名20的标签
这次统计分析对wap网站开发有着重大指导作用。
在测试中发现前10的标签兼容性是最好的,
可以发现几大门户非常有默契的使用div br简单布局。

常见的手机浏览器
opera mini
IE Mobile
safari
Android webkit
Blackberry
ucweb
QQ手机浏览器
Go

浏览器测试
在国内从统计数据来看用ucweb比重较大,ucweb有个拉取背景图的bug.
背景图时有时无
但在几次评测中速度不如opera mini

speed test
http://bbs.dospy.com/thread-603009-1-8.html
http://wapreview.com/blog/?p=4803
假如你是一位经常利用手机上网逛论坛,看日常新闻,视觉感受不在第1位的用户,我建议你用UCWEB.
假如你是一位热衷于掌上娱乐,对视觉冲击非常感冒,并且不在乎流量和多些许时间的用户.我向你推荐OPERA.
假如你是一位对娱乐和效率同样重视的用户,那就像我一样,同时拥抱OPERA&UCWEB吧!

附:手机型号与浏览器

手机操作系统(Mobile OS)
MTK(山寨机基本用的是这种操作系统)
kjava
Palm(blackberry)
windows Mobile(dopod)
Android(htc)
symbian(nokia)

请参考Minmin的css属性标签兼容性对比

手机屏幕分辫率
现在手机常用的分辫率有:128*160、176*220、240*320。
128*160多用在低档的手机。
中档的手机一般分辨率为176*220。
中高档手机分辨率多为:240*320。
现在最高的分辨率达到了480*640

页面宽度选取与兼容
很多wap页面用了固定宽度,这里不建议采用这种方法
固定宽度有很多兼容问题,页面出现显示不全,出现横向滚动等现象。

最佳做法是让宽度自动适应,
手机一行大概能显示13个中文字符
我看过有些文章说是14个,这里问题不大。
我们这里取13个中文字符

这里可能有人问我,为什么最小宽度不用128呢?
128的手机基本不能访问互联网,这里采用了一个市场占有率比较大的最小手机分辨率。

纠结的问题:是所有兼容,还是兼容大部分
在实际开发中,发现要像web端提高视觉效果一个页面兼容几乎所有情况基本不现实。
所以就在下面这些例子,用不同的版本兼容不同的情况。
当然增加很多的运营成本和人力成本。
我们也正在考虑在以后的开发中不上线wml版本,只考虑xhtml mp版然后调用不同的样式来兼容各种情况。
在测试过程中mtk机器能支持简单的背景色,文字颜色,背景图片支持很差。

几大门户所用的兼容应对方法
在我们开发手机校友录,书城,qzone的项目测试中。
能访问internet的手机极少数完全不支持css(支持部分).
由于wap发展比较慢,目前现行的wap页面大部分是wml的(没有css).
由于复杂的兼容性问题,几大互联网公司采取的多版本策略。

比如:
新浪:普通版(wml),彩版(xhtml mp),3g版(xhtml)
sohu:普通版(wml),彩版(xhtml mp),炫彩版(xhtml)
163:普通版(wml),高档版(xhtml mp),电脑版(xhtml)

wml不支持样式
xhtml mp版,支持基本的样式,如背景色,背景图片,文字颜色,margin,padding等。

页面优化
由于用户对流量很敏感。wap页面要尽可能的控制流量。
相比于web,wap页面优化达到了苛刻的地步。
wap页面严格执行web端的优化原则

1.动态程序和静态页面分离,减少页面空白。
2.样式和代码进行压缩
3.用短命名法
4.尽可能使用canvas代替图片(iphone应用开发)
5.减少请求数

常见问题及应对措施