Mobile WEB 的兼容性开发

By SMbey0nd

无线组

Mobile WEB

什么是 Mobile WEB ？

Mobile WEB 跟 WAP 有何区别？

Mobile 设备都有哪些？

趋 势

趋势技术发展周期一般会持续 10 年， 2 年前已经进入下一个重大计算机产品发展周期 – “移动互联网”

趋势新技术发展周期特征：更强处理器 + 改进的用户界面 + 更低的价格 + 扩展服务 =10 倍设备销售量

趋势

中国的 3G 普及率拐点： 2011 年。

趋势

Mobile WEB 风暴即将席卷中国！

See More on ：http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.html

移动设备与 Mobile WEB

移动设备与 Mobile WEB

• 机型

• 平台 / 操作系统

• 内置浏览器

• 第三方浏览器 *

4 大影响因素：

移动设备与 Mobile WEB

移动设备市场份额（中国）：

移动设备与 Mobile WEB

• iPhone OS

• Android

• Maemo

• Windows Mobile

• Palm OS

• Symbian Sx0

• oPhone

• MTK

• OOXX…

平台 / 操作系统：

移动设备与 Mobile WEB

• UCWEB

• OperaMini

• QQ Browser

• Go!

• OEM/Opera Mobile/Fennec/NetFront/Skyfire

…

See More on: http://www.fool2fish.cn/?p=290

第三方浏览器：

移动设备与 Mobile WEB

第三方浏览器市场份额：

数据来源： CNNIC 中国互联网与 3G 用户调查报告 – 2009.11

移动设备与 Mobile WEB

UA 适配：

1. 服务器请求 UA 信息标识2. 客户端返回信息3. 服务器通过 UA 适配库识别客户端4. 根据结果适配不同 WEB 版本5. 返回客户端

移动设备与 Mobile WEB

OneWEB 理念：

• 信息一致性• 搜索引擎友好• 共享书签• 品牌一致性• 内容适配

More ： http://www.smbey0nd.com/2010/01/25/one_web_for_all/

移动标记语言

移动标记语言

演进：

移动标记语言

为何使用 XHTML-MP ：

• OMA/W3C 推荐规范• 厂商普遍支持 • XHTML 的优化子集• 适合 Mobile 特性 (tel 协议、 accesskey 、 format

等 )

*XHTML Mobile Profile 简称 XHTML-MP

移动标记语言

XHTML-MP 语法规则：

• XHTML 元素必须正确的嵌套• 元素和属性的名字必须是小写• 所有的 XHTML 元素必须封闭• 属性值必须使用双引号或单引号• 所有的空标签必须自我封闭• 属性值不能被最小化

移动标记语言

WCSS 特性：

• accesskey 扩展 -wap-accesskey

• 输入格式扩展 -wap-input-format• 字幕扩展 -wap-marquee

• See More on http://www.developershome.com/wap/wcss/

WAP CSS 简称 WCSS

手机兼容性

手机兼容性

手机兼容性 Tips List ：

• 易犯的错误• 高风险 XHTML 标记• 高风险 CSS 属性• 其它情况• 兼容性测试结果

手机兼容性

易犯的错误：

• 编码错误• 重复的 XHTML 元标记• 语法错误• 嵌套错误 ( 规则详见 http://is.gd/63nHg)

• 文件体积过大 ( 部分手机，详见测试结果 )

* 标红项有可能导致页面加载失败

手机兼容性

高风险 XHTML 标记：

• disable 属性• button

• input[type=file]

• iframe

UCWEB 下，增加：

• width/height 属性• a( 锚点 )

• em/strong

• ul/ol

手机兼容性

高风险 CSS 属性：

• 超链接伪类 a:hover…

• 字体 font-family

• 加粗 font-weight

• 文本间距 letter-spacing/word-spacing

• 换行 white-space/word-wrap

• 背景定位 background-position

• 定位 position

• 溢出 overflow

• 列表 + 外边距 ul+margin

• 表单 + 宽高 input+widht+height

手机兼容性

其它情况：

• JavaScript

• 图片过宽• PNG24 (Alpha)

• 连续长英文换行 ( 普通空格 vs   实体空格 )

• XHTML 中的 CSS 编码设置• 个案机型中的个案问题 ( 进一步记录和探索 )

开发流程简介

开发流程简介

• 前期 - 准备

• 收集资料

• 兼容性测试

• 中期 - 页面开发

• 视觉 / 交互 / 前端

• 系统支持 / 发布

• 后期 - 工作跟进

• 设计 / 开发规范更新

• 总结和分享

标红项为周期性工作

• 浏览器兼容测试 http://www.fool2fish.cn/?p=320

• Mobile 1: Introduction to the mobile web

http://dev.opera.com/articles/view/introduction-to-th

e-mobile-web/

• XHTML Mobile Profile & WCSS

http://www.developershome.com/wap/xhtmlmp/

http://www.developershome.com/wap/wcss/

• 万网合一， One Web 为人人 http://www.smbey0nd.com/2010/01/25/one_web_for_

all/

• Mobile Web Best Practices 1.0

http://www.w3.org/TR/mobile-bp/

• CNNIC http://research.cnnic.cn/

• Mobile Web Test Suites

http://www.w3.org/2005/MWI/Tests/

• ……

资源&参考文献

加油！努力！奋斗！

我的联系方式

BLOG ： http://www.SMbey0nd.com

Twitter ： SMbey0nd

QQ ： 100999829

淘江湖：完颜小卓

Email ： SMbey0nd@163.com

FAQ

3Q Very Much