无线组<br />Mobile WEB 的兼容性开发<br />By SMbey0nd<br />
Mobile WEB<br />什么是Mobile WEB?<br />Mobile WEB跟WAP有何区别?<br />Mobile设备都有哪些?<br />
趋 势<br />
趋势<br />技术发展周期一般会持续10年,2年前已经进入下一个重大计算机产品发展周期 – “移动互联网”<br />
趋势<br />新技术发展周期特征:更强处理器+改进的用户界面+更低的价格+扩展服务=10倍设备销售量<br />
趋势<br />中国的3G普及率拐点:2011年。<br />
趋势<br />Mobile WEB 风暴即将席卷中国!<br />See More on:http://www.morganstanley.com/institutional/techresearch/mobile_internet_repo...
移动设备与Mobile WEB<br />
移动设备与Mobile WEB<br />4大影响因素:<br /><ul><li> 机型
 平台/操作系统
 内置浏览器
第三方浏览器*</li></li></ul><li>移动设备与Mobile WEB<br />移动设备市场份额(中国):<br />
移动设备与Mobile WEB<br />平台/操作系统:<br /><ul><li>iPhone OS
Android
Maemo
 Windows Mobile
 Palm OS
Symbian Sx0
oPhone
 MTK
OOXX…</li></li></ul><li>移动设备与Mobile WEB<br />第三方浏览器:<br /><ul><li>UCWEB
OperaMini
QQ Browser
 Go!
OEM/Opera Mobile/Fennec/NetFront/Skyfire …</li></ul>See More on: http://www.fool2fish.cn/?p=290<br />
移动设备与Mobile WEB<br />第三方浏览器市场份额:<br />数据来源:CNNIC 中国互联网与3G用户调查报告 – 2009.11<br />
移动设备与Mobile WEB<br />UA适配:<br />服务器请求UA信息标识<br />客户端返回信息<br />服务器通过UA适配库识别客户端<br />根据结果适配不同WEB版本<br />返回客户端<br />
移动设备与Mobile WEB<br />OneWEB理念:<br /><ul><li>信息一致性
搜索引擎友好
共享书签
品牌一致性
内容适配</li></ul>More:http://www.smbey0nd.com/2010/01/25/one_web_for_all/<br />
移动标记语言<br />
Upcoming SlideShare
Loading in …5
×

Mobile Web的兼容性开发

3,176 views
3,023 views

Published on

1.Mobile WEB相关概念
什么是Mobile WEB
趋势和新资讯
2.移动设备简介
1.平台、操作系统和浏览器
2.第三方浏览器
3.特性(UA等)
4.One WEB
3.移动标记语言介绍
1.移动标记语言的演进
2.XHTML-MP
3.WCSS(移动特性)
4.手机兼容性
1.兼容性TIP List
2.测试报告分享
5.工作流程简介
6.资源和参考文献等
7.FAQ

Published in: Technology
2 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
3,176
On SlideShare
0
From Embeds
0
Number of Embeds
273
Actions
Shares
0
Downloads
117
Comments
2
Likes
14
Embeds 0
No embeds

No notes for slide

Mobile Web的兼容性开发

  1. 1. 无线组<br />Mobile WEB 的兼容性开发<br />By SMbey0nd<br />
  2. 2. Mobile WEB<br />什么是Mobile WEB?<br />Mobile WEB跟WAP有何区别?<br />Mobile设备都有哪些?<br />
  3. 3. 趋 势<br />
  4. 4. 趋势<br />技术发展周期一般会持续10年,2年前已经进入下一个重大计算机产品发展周期 – “移动互联网”<br />
  5. 5. 趋势<br />新技术发展周期特征:更强处理器+改进的用户界面+更低的价格+扩展服务=10倍设备销售量<br />
  6. 6. 趋势<br />中国的3G普及率拐点:2011年。<br />
  7. 7. 趋势<br />Mobile WEB 风暴即将席卷中国!<br />See More on:http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.html<br />
  8. 8. 移动设备与Mobile WEB<br />
  9. 9. 移动设备与Mobile WEB<br />4大影响因素:<br /><ul><li> 机型
  10. 10. 平台/操作系统
  11. 11. 内置浏览器
  12. 12. 第三方浏览器*</li></li></ul><li>移动设备与Mobile WEB<br />移动设备市场份额(中国):<br />
  13. 13. 移动设备与Mobile WEB<br />平台/操作系统:<br /><ul><li>iPhone OS
  14. 14. Android
  15. 15. Maemo
  16. 16. Windows Mobile
  17. 17. Palm OS
  18. 18. Symbian Sx0
  19. 19. oPhone
  20. 20. MTK
  21. 21. OOXX…</li></li></ul><li>移动设备与Mobile WEB<br />第三方浏览器:<br /><ul><li>UCWEB
  22. 22. OperaMini
  23. 23. QQ Browser
  24. 24. Go!
  25. 25. OEM/Opera Mobile/Fennec/NetFront/Skyfire …</li></ul>See More on: http://www.fool2fish.cn/?p=290<br />
  26. 26. 移动设备与Mobile WEB<br />第三方浏览器市场份额:<br />数据来源:CNNIC 中国互联网与3G用户调查报告 – 2009.11<br />
  27. 27. 移动设备与Mobile WEB<br />UA适配:<br />服务器请求UA信息标识<br />客户端返回信息<br />服务器通过UA适配库识别客户端<br />根据结果适配不同WEB版本<br />返回客户端<br />
  28. 28. 移动设备与Mobile WEB<br />OneWEB理念:<br /><ul><li>信息一致性
  29. 29. 搜索引擎友好
  30. 30. 共享书签
  31. 31. 品牌一致性
  32. 32. 内容适配</li></ul>More:http://www.smbey0nd.com/2010/01/25/one_web_for_all/<br />
  33. 33. 移动标记语言<br />
  34. 34. 移动标记语言<br />演进:<br />
  35. 35. 移动标记语言<br />为何使用XHTML-MP:<br /><ul><li>OMA/W3C推荐规范
  36. 36. 厂商普遍支持
  37. 37. XHTML的优化子集
  38. 38. 适合Mobile特性 (tel协议、accesskey、format等)</li></ul>*XHTML Mobile Profile 简称 XHTML-MP<br />
  39. 39. 移动标记语言<br />XHTML-MP语法规则:<br /><ul><li>XHTML元素必须正确的嵌套
  40. 40. 元素和属性的名字必须是小写
  41. 41. 所有的XHTML元素必须封闭
  42. 42. 属性值必须使用双引号或单引号
  43. 43. 所有的空标签必须自我封闭
  44. 44. 属性值不能被最小化</li></li></ul><li>移动标记语言<br />WCSS特性:<br /><ul><li>accesskey扩展 -wap-accesskey
  45. 45. 输入格式扩展 -wap-input-format
  46. 46. 字幕扩展 -wap-marquee
  47. 47. See More on http://www.developershome.com/wap/wcss/</li></ul>WAP CSS 简称 WCSS<br />
  48. 48. 手机兼容性<br />
  49. 49. 手机兼容性<br />手机兼容性 Tips List:<br /><ul><li> 易犯的错误
  50. 50. 高风险XHTML标记
  51. 51. 高风险CSS属性
  52. 52. 其它情况
  53. 53. 兼容性测试结果</li></li></ul><li>手机兼容性<br />易犯的错误:<br /><ul><li> 编码错误
  54. 54. 重复的XHTML元标记
  55. 55. 语法错误
  56. 56. 嵌套错误 (规则详见http://is.gd/63nHg)
  57. 57. 文件体积过大 (部分手机,详见测试结果)</li></ul>*标红项有可能导致页面加载失败<br />
  58. 58. 手机兼容性<br />高风险XHTML标记:<br /><ul><li>disable属性
  59. 59. button
  60. 60. input[type=file]
  61. 61. iframe</li></ul>UCWEB下,增加:<br /><ul><li>width/height属性
  62. 62. a(锚点)
  63. 63. em/strong
  64. 64. ul/ol</li></li></ul><li>手机兼容性<br />高风险CSS属性:<br /><ul><li> 超链接伪类 a:hover…
  65. 65. 字体 font-family
  66. 66. 加粗 font-weight
  67. 67. 文本间距 letter-spacing/word-spacing
  68. 68. 换行 white-space/word-wrap
  69. 69. 背景定位 background-position
  70. 70. 定位 position
  71. 71. 溢出 overflow
  72. 72. 列表+外边距 ul+margin
  73. 73. 表单+宽高 input+widht+height</li></li></ul><li>手机兼容性<br />其它情况:<br /><ul><li>JavaScript
  74. 74. 图片过宽
  75. 75. PNG24 (Alpha)
  76. 76. 连续长英文换行 (普通空格 vs  实体空格)
  77. 77. XHTML中的CSS编码设置
  78. 78. 个案机型中的个案问题 (进一步记录和探索)</li></li></ul><li>开发流程简介<br />
  79. 79. 开发流程简介<br /><ul><li> 前期-准备
  80. 80. 收集资料
  81. 81. 兼容性测试
  82. 82. 中期-页面开发
  83. 83. 视觉/交互/前端
  84. 84. 系统支持/发布
  85. 85. 后期-工作跟进
  86. 86. 设计/开发规范更新
  87. 87. 总结和分享</li></ul>标红项为周期性工作<br />
  88. 88. 资源&参考文献<br /><ul><li> 浏览器兼容测试http://www.fool2fish.cn/?p=320
  89. 89. Mobile 1: Introduction to the mobile web http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
  90. 90. XHTML Mobile Profile & WCSS http://www.developershome.com/wap/xhtmlmp/</li></ul>http://www.developershome.com/wap/wcss/<br /><ul><li>万网合一,One Web为人人http://www.smbey0nd.com/2010/01/25/one_web_for_all/
  91. 91. Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/
  92. 92. CNNIC http://research.cnnic.cn/
  93. 93. Mobile Web Test Suites http://www.w3.org/2005/MWI/Tests/
  94. 94. ……</li></li></ul><li>加油!努力!奋斗!<br />
  95. 95. 我的联系方式<br />BLOG: http://www.SMbey0nd.com<br />Twitter :SMbey0nd<br />QQ:100999829<br />淘江湖:完颜小卓<br />Email:SMbey0nd@163.com<br />
  96. 96. FAQ<br />
  97. 97. 3QVery Much<br />

×