Mobile Web的兼容性开发
-
Upload
- -
Category
Technology
-
view
2.796 -
download
4
description
Transcript of Mobile Web的兼容性开发
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 : [email protected]
FAQ
3Q Very Much