本文讲述我这两周手机web开发中的一些经验总结,我是个菜鸟,有什么地方说错了请大家帮忙指点一下~
时代在不断变迁,手机上网早已普及大众,但远远落后的,不是停滞不前的wap协议,而是花样百出的手机浏览器,手机浏览器已进入百家争鸣的状态。但是欣慰的是,现在手机浏览器存在一个共同的目标:如何让网页显示得和电脑看到的一样(即使电脑不同浏览器间也存在差别,特别是CSS3的到来)。
我们没有选择WML,而是HTML。
WAP协议是针对流量受限,屏幕大小较小,功率消耗小,运算处理速度低的小型移动终端而设计的;尽管WAP的兼容性和可扩展性好,可是人们的目标始终是:手机浏览和电脑浏览能得到一致的效果,因此,随着手机浏览器的发展,WAP必将被舍弃。
参考资料:http://www.wapforum.org/faqs/index.htm
几个测试
通过对不同机型的实测,请允许我我主观地对结果做一个简单的排序:
-
Android自带浏览器
- 用户体验一流
用过Android自带浏览器的用户应该深有体会,当你用两个手指放大网页上的图片时,不得不在心理发出惊叹,这种感觉太棒了!,字体和图片全部跟着放大,并懂得自动换行,这才是smartphone! - 堪称完美的样式展示
测试用的9种手机浏览器中,这种是网页兼容性最好的浏览器了。和我在电脑上用firefox测试的效果一模一样,甚至在某些方面做得更好;而且,这是测试的9种浏览器中两种实现了自动跳转脚本的浏览器之一。 - 字体显示全部按用户设定的大小显示
- 用户体验一流
-
Opera Mobile (Version 10.00)
超炫的界面,几乎完美的兼容性,仅仅是偶尔的中文排版问题(原因不明,英文可以完美展示,中文浏览部分网站会排版错误,比如一行多出3个字符)。
-
Symbian s60 3rd UCWEB (V7.2.2.51)
适应屏幕模式:
- 强制统一了所以字体大小,包括h4~h6和p一样大,h1~h3比p大约2px。无斜体。
- 当字体颜色和背景颜色相同时,强制改为黑色。
- border-color默认为灰色。
- body强制有3px的margin。
- 不完全的无视margin和padding,默认margin为0,block元素有1px的padding-top和3px的padding-bottom,还有margin:5px 0px;但是当没有定义margin的上和下时,会出现IE典型的double margin的bug。
- 对于内联函数,对齐也有问题,有空截图下来。
缩放模式:字体还是统一了大小(UC这你就做得不对了)。
-
魅族自带浏览器
感觉就是仿Android,可是幸运的是,“该有”的小bug它也有了~
-
Opera Mini(Version 5.0.18755)
作为mini型浏览器,opera mini非常的出色,几乎完美地表现了盒子模型,只是偶尔会碰到中文字体换行有偏差,估计是外框的左padding撑开了字体?不对啊,一行显示的字数足足多出了4,5个…这个以后有空在研究。
-
Android UCWEB(v7.0.3.45) & 魅族UCWEB(v7.1.042 wince)
不明白为什么Android的UCWEB比Symbian的效果差,字体大小被重设,这本身没有什么问题,错就错在字体被放大得太大了,图标和图片还是原比例,搭配非常不协调。还有很多小bug,比如图标对齐有问题。
-
Symbian s60 3rd自带浏览器
网络浏览体验其实还蛮不错的,可惜以为一尘不变以及流量的浪费,使它最后还是成为了诺基亚的一个花瓶。
-
Symbian QQ浏览器
请原谅这位手机浏览器的初生婴儿吧,半岁大的QQ手机浏览器,不单止只能载入单一CSS,默认字体和大小都奇丑无比,样式也一团糟,还自作聪明地去掉了所有空格,除了进QQ农场,还是不要干别的好…
一些要注意的地方:
- 所有测试的适应屏幕浏览器均不支持a:focus。所有懂得适应屏幕模式都重设了字体大小和样式。(现在想想重设才是正常的)
- 不要自动跳转。
- 少用背景图片。
【字体】
- 不要对字体抱有任何幻想,感觉比较漂亮的字体还是arial,sans-serif;
- 字体大小虽然不是必要但是最好还是重新设定,这对于能缩放的浏览器有较好的用户体验;
- 视觉设计不要依赖于你的字体大小和字体颜色,因为大多数浏览器会重设你的字体,包括大小和颜色
Summary
- 对于有重写代码的css,手机浏览器对重写的优先级顺序更加复杂,建议不要写太复杂的CSS。
- 手机浏览器兼容性相当混乱,不建议尝试制作精密到像素的手机WEB设计。
- 如果目标只是制作手机网页,怎么简单就怎么做,不要依赖CSS达到美观效果,但可以试着多加些小gif图标。
- 既然不同浏览器的网页展现方式如此不同,那么,最低限度请不要出现任何的html或css错误了,对代码不严密的网页,不同浏览器的纠错能力各不相同,展示效果更是“随心所欲”。