手机网站开发必修课[1]:手机浏览器 本文来自:http://www.fool2fish.cn/?p=290
头大的是,除了自己公司已有的一些经验,网上恐怕没有过多的(公开的)文档可以参考。 09年上半年的工作重心全在手机网页开发上面,这使得自己某种程度上也成了拓荒者。现将这段时间的开发心得同大家分享以下,欢迎大家跟我交换自己的想法。
手机网站开发必修课系列文章计划:
- 手机浏览器
- 来自wiki的解释
- 对wiki的总结
- 浏览器兼容性测试
- 为什么要有兼容性测试:比web浏览器还恐怖的手机浏览器
- 目标用户数据挖掘
- 安排测试,整理测试结果
- 测试结果对手机网站开发的指导意义
- 对设计的指引作用
- 确保裸html代码具有较高可用性,谨慎使用html标签
- css使用注意事项
- 非常重要:代码的优雅降级
注:由于有些数据牵涉到公司的商业机密,所以在这个系列的文章当中,有些可能不会公布出详细的数据,但会给出方向性的结论或者意见,请大家见谅。
手机有哪些浏览器?这些浏览器对xhtml、css和js的支持度怎么样?目标用户的手机使用情况?条件限制下的手机界面设计要如何进行?如何快速搭建一个手机网页?如何做好网站的兼容性工作?想必这些问题每个参与过手机网页开发的人都遇到过。要了解手机网站开发的诀窍,我们必须先了解手机浏览器。虽然百度“手机浏览器”没啥有价值的文章,所幸google“mobile broswer”出来了比较多有价值的文章。那么,站在前人的肩膀上,我们可以看的更远。
以下文字翻译自维基百科》手机浏览器:http://en.wikipedia.org/wiki/Mobile_browser
手机浏览器,又称微浏览器、迷你浏览器或者无线因特网浏览器,是被设计用于像手机或者PDA之类的无线设施的网页浏览器。手机浏览器针对在便携设备上的小屏幕网页显示进行了专门的优化,以使网页内容显示最高效。手机浏览器的软件必须小巧并且能适应无线掌上设备的低存储量和低带宽。它们一度是最简朴的网页浏览器,但是2006年以后有些手机浏览器能够支持象css2.1、JavaScript和Ajax这样的最新技术。那些被设计从手机浏览器访问的网站叫无线门户。
- 相关的技术
- 先驱们
- 流行的移动浏览器
- 被主流手机和PDA厂商使用的默认浏览器
- 用户可安装的手机浏览器
- 手机HTML代码转换机
- 更多
- 参考
- 更多外部链接
1 相关的技术
手机浏览器通常通过蜂巢网络连接,通过无线局域网连接的手机浏览器数量也日渐增多,后者使用基于TCP/IP的HTTP并能显示那些使用HTML, XHTML Mobile Profile (WAP 2.0), 或者WML (从HDML发展而来)编写的网页。WML和 HDML是适于通过低带宽传送数据的最简朴的形式,而无线数据的连接被称为WAP。
在日本,DoCoMo定义了基于i-mode HTML的 i-mode服务,是压缩HTML(C-HTML)的一种扩展,HTML的一个子集。
WAP 2.0指定了XHTML手机协议和WAP CSS,WAP CSS是是W3C标准的 XHTML和 CSS在移动设备上扩展的一个子集。
2 先驱们
那些被称为微浏览器的技术,诸如WAP, NTTDocomo的 i-mode平台和Openwave的 HDML平台点燃了人们对无线数据服务的第一次热情。
第一个微型浏览器的诞生大约是在1997年, 当Unwired Planet 公司(后来发展为 Openwave)将他们的”UP.Browser”放在AT&T公司的手持设备上以供用户访问HDML内容。
一家英国公司, STNC股份有限公司,在1997年的时候研发了一款叫做 HitchHiker的微型浏览器,并对这款装备设计了全套的UI。这款微型浏览器(Webwalker)的演示平台拥有每秒处理百万条指令的能力。它是一个单核处理平台,在类似于应用堆栈的处理器上跑着GSM堆栈。1999年STNC被微软收购,并且HitchHiker变身为Microsoft Mobile Explorer 2.0,不同于之前的Microsoft Mobile Explorer 1.0。HitchHiker被认为是第一款拥有统一标准的渲染模型的微型浏览器,它在一个客户端遵从EcmaScript, WMLScript, POP3 和 IMAP 邮件等标准处理 HTML 和 WAP。尽管这个浏览器最终未被使用,但它确实可是使HTML 和 WAP在一个页面上联合使用,虽然这将使得其他的设备无法正确渲染该页面。另外, Amstrad公司倒霉的将HitchHiker作为他们e-m@iler和 e-m@iler+产品的操作系统,手机浏览器2.0在Benefon Q, Sony CMD-Z5, CMD-J5, CMD-MZ5, CMD-J6, CMD-Z7, CMD-J7 and CMD-J70.等设备上都可使用。
还有一款叫Palmscape的用于PalmOS的免费浏览器(虽然后来才成为共享软件的),由Kazuho Oku 1998年在东京编写,他继而发现了Ilinx,这款浏览器直到2003年才放开使用限制。
于2001年发布的 Mobile Explorer 3.0增加了iMode的兼容性和众多的专利设计。通过假想的将这些专利设计结合到WAP协议中, MME3.0执行了OTA数据库同步、推送了email,推送了信息客户端和PIM功能。已经退出市场的索尼爱立信CMD-Z700深度集成了MME3.0。MME的开发脚步在2002年中旬画上了句号。
Opera Software公司以他的小屏幕渲染技术(Small Screen Rendering )和中屏幕渲染技术(Medium Screen Rendering)领先于该领域。Opera的的web浏览器可以让普通的web网页在小型屏幕和中型屏幕上重新布局,并达到最优显示。他是第一款广泛支持Ajax和通过ACID2测试的浏览器。
3 流行的移动浏览器
手机浏览器和基于web的模拟器不同,基于web的模拟器使用一种“虚拟的手持设备”在电脑上显示wap页面,使用java或者html转码器。这些模拟器有 Wapjag, TT, Waptiger 和 Superwap。
一下表格列出了一些当下非常流行的手机浏览器。一些手机浏览器是web浏览器的精简版本,因此一些手机浏览器厂商也提供用于台式机和笔记本电脑的浏览器。
3.1 被主流手机和PDA厂商使用的内置手机浏览器
3.2 流行的用户可安装的手机浏览器
- Bolt[5]
- Bluelark Bluelark bought by Handspring Inc.
- Deepfish Beta from Microsoft, proxy-rendering browser.
- Doris by Anygraaf Oy (Vantaa, Finland)
- Fennec by Mozilla Foundation.
- IbisBrowser
- iPanel for Palm OS,
- jB5 Mobile Browser Beta from Jataayu Software.
- JOCA by InteracT!V, another proxy-rendering free software.
- Links2 on the Playstation Portable (requires custom firmware)
- Minimo by Mozilla Foundation (based on Gecko).
- NetFront
- Opera Mini by Opera Software - supports most features of stand-alone Opera, but can run on less capable phones by offloading memory-intensive rendering to proxy server (based on Opera Mobile running on a server).
- Opera Mobile by Opera Software - supports all modern web standards supported by desktop browsers, including XHTML, CSS2 and Ajax. Has advanced Small Screen Rendering that adapts regular pages to small screen (proprietary).
- Pixo by Sun Microsystems (Pixo acquired by Sun July 2003)
- PocketWeb by tlogic.de (Heidelberg, Germany) Official product page
- RocketBrowser Rocket Mobile, Inc. (Silicon Valley, CA).
- SAS
- Skweezer
- Skyfire Open Beta by Skyfire Labs. Supports Flash and Ajax and allows a fully functional PC web-like experience.
- Stanford Power Browser created in Stanford’s InfoLab [3]
- Steel
- Teashark - a free Java-based browser with a desktop-like layout [4]
- ThunderHawk by Bitstream Inc. (Cambridge, MA)
- UCWEB by UCWEB Technology
- Universe by OpenMobl Systems
- Webby Mobile by AnOriginalIdea
- WebViewer - a free Java based browser by Reqwireless
- WinWAP by Winwap Technologies Official product page
3.3 手机HTML代码转换机
手机HTML代码转换机将web内容重新格式化并压缩成移动设备可用的内容,并且必须和内置的或者用户安装的手机浏览器配合使用。以下是几个领先的手机HTML代码转换机服务。
- Skweezer - used by Orange, Etisalat, JumpTap, Medio, Miva, and others
- Teashark
- Opera Mini
4 更多
5 参考
- 无线门户的定义
- 关于Openwave Openwave.2009.2009年2月26日寻回
- Weather Underground网站为手机用户提供天气服务
- Myriad浏览器v9数据表(pdf) Myriad小组. 2009.2009年2月26日寻回
- bolt浏览器官网
6 更多外部链接
- W3C手机网页第一步 — “W3C手机网页第一步的目标是要让用户从移动设备访问网页成为现实——Tim Berners-Lee, W3C 网站的创始人之一如是说.
- 用于小型信息设备的紧凑HTML —1998年2月
- 开放移动通信联盟
- 黑莓浏览器开发者网页
- ItsNat 一个很多手机浏览器支持的基于Java的AJAX网页框架
对wiki的总结
对于wiki中提到的浏览器类型,还有两个页面可供参考
看完整篇文章后,有一些问题要问问聪明的你
- 什么是渲染引擎?什么是浏览器?这是两个最先要搞清楚的概念。
- 内置的手机浏览器,用户安装的手机浏览器和基于web的模拟器
- 每个浏览器都有相应的渲染引擎,因此有必要知道使用同一个渲染引擎的手机浏览器的页面表现是否一致
- 国内主流的浏览器机型有哪些?国内用户是否喜欢使用用户自己安装的浏览器。不管怎么样,作为一个开发人员,应该尽量去体验一下这里提到的各种用户可安装的浏览器。
- 基于web的模拟器是前期测试很有效的工具,推荐使用safari,opera和firefox(需安装插件)
- 如何保证手机网页的开发效率(包括质量和速度哦)?
以上这些问题,前两点在本文中有提到,后面几点希望大家能开动脑筋先想想,答案将在后续的文章中揭晓
建议用你自己的手机访问一些国内较大的无线网站。比如 http://wap.taobao.com,http://wap.163.com等等