开放移动web网页中的一些体会

By | 2010年6月10日

本文讲述我这两周手机web开发中的一些经验总结,我是个菜鸟,有什么地方说错了请大家帮忙指点一下~

时代在不断变迁,手机上网早已普及大众,但远远落后的,不是停滞不前的wap协议,而是花样百出的手机浏览器,手机浏览器已进入百家争鸣的状态。但是欣慰的是,现在手机浏览器存在一个共同的目标:如何让网页显示得和电脑看到的一样(即使电脑不同浏览器间也存在差别,特别是CSS3的到来)。

我们没有选择WML,而是HTML。

WAP协议是针对流量受限,屏幕大小较小,功率消耗小,运算处理速度低的小型移动终端而设计的;尽管WAP的兼容性和可扩展性好,可是人们的目标始终是:手机浏览和电脑浏览能得到一致的效果,因此,随着手机浏览器的发展,WAP必将被舍弃。
参考资料:http://www.wapforum.org/faqs/index.htm

几个测试

通过对不同机型的实测,请允许我我主观地对结果做一个简单的排序:

  1. Android自带浏览器

    1. 用户体验一流
      用过Android自带浏览器的用户应该深有体会,当你用两个手指放大网页上的图片时,不得不在心理发出惊叹,这种感觉太棒了!,字体和图片全部跟着放大,并懂得自动换行,这才是smartphone!
    2. 堪称完美的样式展示
      测试用的9种手机浏览器中,这种是网页兼容性最好的浏览器了。和我在电脑上用firefox测试的效果一模一样,甚至在某些方面做得更好;而且,这是测试的9种浏览器中两种实现了自动跳转脚本的浏览器之一。
    3. 字体显示全部按用户设定的大小显示
  2. Opera Mobile (Version 10.00)

    超炫的界面,几乎完美的兼容性,仅仅是偶尔的中文排版问题(原因不明,英文可以完美展示,中文浏览部分网站会排版错误,比如一行多出3个字符)。

  3. Symbian s60 3rd UCWEB (V7.2.2.51)

    适应屏幕模式:

    1. 强制统一了所以字体大小,包括h4~h6和p一样大,h1~h3比p大约2px。无斜体。
    2. 当字体颜色和背景颜色相同时,强制改为黑色。
    3. border-color默认为灰色。
    4. body强制有3px的margin。
    5. 不完全的无视margin和padding,默认margin为0,block元素有1px的padding-top和3px的padding-bottom,还有margin:5px 0px;但是当没有定义margin的上和下时,会出现IE典型的double margin的bug。
    6. 对于内联函数,对齐也有问题,有空截图下来。
    7. 缩放模式:字体还是统一了大小(UC这你就做得不对了)。

  4. 魅族自带浏览器

    感觉就是仿Android,可是幸运的是,“该有”的小bug它也有了~

  5. Opera Mini(Version 5.0.18755)

    作为mini型浏览器,opera mini非常的出色,几乎完美地表现了盒子模型,只是偶尔会碰到中文字体换行有偏差,估计是外框的左padding撑开了字体?不对啊,一行显示的字数足足多出了4,5个…这个以后有空在研究。

  6. Android UCWEB(v7.0.3.45) & 魅族UCWEB(v7.1.042 wince)

    不明白为什么Android的UCWEB比Symbian的效果差,字体大小被重设,这本身没有什么问题,错就错在字体被放大得太大了,图标和图片还是原比例,搭配非常不协调。还有很多小bug,比如图标对齐有问题。

  7. Symbian s60 3rd自带浏览器

    网络浏览体验其实还蛮不错的,可惜以为一尘不变以及流量的浪费,使它最后还是成为了诺基亚的一个花瓶。

  8. Symbian QQ浏览器

    请原谅这位手机浏览器的初生婴儿吧,半岁大的QQ手机浏览器,不单止只能载入单一CSS,默认字体和大小都奇丑无比,样式也一团糟,还自作聪明地去掉了所有空格,除了进QQ农场,还是不要干别的好…

一些要注意的地方:

  • 所有测试的适应屏幕浏览器均不支持a:focus。所有懂得适应屏幕模式都重设了字体大小和样式。(现在想想重设才是正常的)
  • 不要自动跳转。
  • 少用背景图片。

【字体】

  • 不要对字体抱有任何幻想,感觉比较漂亮的字体还是arial,sans-serif;
  • 字体大小虽然不是必要但是最好还是重新设定,这对于能缩放的浏览器有较好的用户体验;
  • 视觉设计不要依赖于你的字体大小和字体颜色,因为大多数浏览器会重设你的字体,包括大小和颜色

Summary

  • 对于有重写代码的css,手机浏览器对重写的优先级顺序更加复杂,建议不要写太复杂的CSS。
  • 手机浏览器兼容性相当混乱,不建议尝试制作精密到像素的手机WEB设计。
  • 如果目标只是制作手机网页,怎么简单就怎么做,不要依赖CSS达到美观效果,但可以试着多加些小gif图标。
  • 既然不同浏览器的网页展现方式如此不同,那么,最低限度请不要出现任何的html或css错误了,对代码不严密的网页,不同浏览器的纠错能力各不相同,展示效果更是“随心所欲”。

发表评论