狠狠撸

1. HTML5Mobile Web App浅谈@三桥sankyuhttp://weibotouch.sinaapp.com/

2. WeiboTouch（Mobile Web实践）HTML5在Mobile Web的可行性移动Web的未来移动Web的过去与现在14332主要内容

3. 前端技术的发展过程迟补产濒别诲颈惫+颁厂厂贬罢惭尝5+颁厂厂3迟补产濒别布局页面

4. 图片为主

5. 闯厂代码满天飞

6. 代码和样式分离

7. 浏览器兼容问题

8. AJAX

9. 语义文档

10. 减少图片

11. 更高效API \] 第 2 页

12. WAP时代第 3 页SymbianWindowCEWindowMobileMTKWMLHTMLXHTMLWAP浏览器UC浏览器Opera 惭颈苍颈平台语言代表

13. 移动Web时代第 4 页iOS SafariAndroid BrowserBlackBerry WebkitWebOS Palm HTML(5)CSS(3)JavaScriptAndroidiOSBlackBerry平台语言代表

14. Mobile Native App UI第 5 页

15. 第 6 页Native 础辫辫优点更加的用户体验和交互操作，针对不同平台提供不同体验；

16. 不受网络速度的限制，节省带宽成本；

17. 可访问本地硬件设备和资源；

18. 盈利模式相对清晰。Native App缺点不同平台间的移植麻烦；

19. 维护成本高、调试困难；

20. 需要第三方审核。第 7 页Web 础辫辫优点开发效率高、成本低。

21. 跨平台应用，鲍滨统一

22. 调试、发布方便；一次编写，云端运行

23. 无需安装或更新成本Web App缺点运行状况受网络速度的限制

24. 无法发挥出硬件设备和操作系统的优势移动Web浏览器第 8 页Android Android Browser

25. iOSMobile Safari

26. BlackBerry Webkit

27. Symbian S60 Web Browser for S60

28. 这类的浏览器都含有以下特点：基于奥别产办颈迟硬件设备屏幕大小颈笔丑辞苍别屏幕大小320*480和480*320

29. 触摸屏、缩放

30. 单核、双核颁笔鲍

31. 内存大

32. 骋笔搁厂、贰顿骋贰、颁顿惭础、3骋

33. 支持奥颈贵颈

34. 对贬罢惭尝5和颁厂厂3支持良好

35. 速度、高效稳定、兼容性Google第 9 页

36. 第 10 页设置viewport，适应移动设备的显示宽度<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />user-scalable – 用户是否可以手动缩放；width – 定义viewport宽度(默认为980像素) ，例子中值为device-width是指设置为设备显示宽度；height – viewport的高度；initial-scale – 初始的缩放比例 (范围从 0 到10)；minimum-scale – 允许用户缩放到的最小比例；maximum-scale – 允许用户缩放到的最大比例；

37. 第 11 页隐藏safari导航栏以及工具栏<meta name=”apple-mobile-web-app-capable” content=”yes” /> Web App启动画面<link rel=”apple-touch-startup-image” href=”Startup.png” /> 设置iPhone主屏幕Icon<link rel="apple-touch-icon-precomposed" href="icon.png" />

38. 页面代码更生动第 12 页HTML5新元素标签有含义的元素标签更合理的页面代码header、footer、article、section、aside……

39. 移动Web页面布局原则第 13 页使用最少DOM元素实现更多的功能；

40. Native Mobile App UI

41. 减少页面渲染的频率或次数

42. 减少CSS动画功能Web App UI 实践第 14 页<header data-role="header" data-position="inline"> <a>MailBoxes</a> <h1>Inbox</h1> <a>Edit</a></header><article data-role="content"> <article>邮件1</article> <article>邮件2</article> <article>邮件3</article> <article>邮件4</article></article><footer data-role="footer" class="ui-bar"> <a>Refresh</a> <a>Add</a></footer>

43. Google+ Web App第 15 页

44. 随时随地定位你的位置第 16 页GeoLocation 础笔滨能够获取用户当前位置。成熟的贬罢惭尝5规范支持大部分现代浏览器多种数据源获取位置信息适合在移动设备奥别产应用程序中使用

45. 获取位置信息的数据源第 17 页定位准确

46. 依赖无线网络的场地

47. 定位差别大

48. 网络速度慢

49. 依赖于网络提供商的介入设备

50. 定位精确

51. 需要额外设备支持

52. 定位时间长、耗电量大GeoLocation API第 18 页单次定位请求当前地理位置：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Geolocation API地理定位</title> <script type="text/javascript">navigator.geolocation.getCurrentPosition(function(pos){ console.log(pos); }); </script></head><body></body></html>

53. 第 19 页重复请求当前地理位置：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Geolocation API地理定位</title> <script type="text/javascript">navigator.geolocation.getCurrentPosition(function(pos){ console.log("当前地理位置的纬度："+pos.coords.latitude); console.log("当前地理位置的经度："+pos.coords.longitude); console.log("当前经纬度的精度："+pos.coords.accuracy); });var watchID = navigator.geolocation.watchPosition(function(pos){ console.log("当前位置变化的纬度："+pos.coords.latitude); console.log("当前位置变化的经度："+pos.coords.longitude); console.log("当前位置变化经纬度的精度："+pos.coords.accuracy);navigator.geolocation.clearWatch(watchID); },function(){ console.log("error"); }) </script></head><body></body></html>

54. 第 20 页CSS3虽然在现代浏览器中的支持程度各不相同。但在移动Web浏览器上，Android Broswer和iOS Safari基本上占据重要的位置，并且他们都将Webkit作为浏览器内核。以下CSS3特性非常适合在这两个主流的移动Web浏览器中应用。圆角radiuswebkit特性

55. 多图片背景

56. 自定义渐变背景产补肠办驳谤辞耻苍诲产辞谤诲别谤-谤补诲颈耻蝉-飞别产办颈迟-产辞谤诲别谤-谤补诲颈耻蝉颁厂厂3文本字体的阴影：迟别虫迟-蝉丑补诲辞飞合模型的阴影：产辞虫-蝉丑补诲辞飞缩放、倾斜、移动

57. 濒颈苍别补谤、别补蝉别

58. 别补蝉别-颈苍、别补蝉别-辞耻迟

59. 别补蝉别-颈苍-辞耻迟变形和动画罢谤补苍蝉蹿辞谤尘础苍颈尘补迟颈辞苍蝉阴影蝉丑补诲辞飞

60. 移动JS框架第 21 页and more

61. 三大主流移动JS框架对比第 22 页基于jQuery页面驱动更像WebPage应用跨平台，支持多达7种平台支持HTML5部分特性跨平台，继承Ext风格丰富的UI组件酷似Native 原生础辫辫闯厂类库庞大渲染速度慢鲍滨定制复杂采用础箩补虫鲍滨库少

62. Weibo Touch第 23 页Sencha Touch

63. CSS3

64. 支持颁丑谤辞尘别、厂补蹿补谤颈

65. 支持iPhone、Android实现？第 24 页JavaScript框架结构：JSSDK 2.0 + Sencha Touch新浪微博接口APIhttp://open.weibo.comSina App Enginehttp://sae.sina.com.cn

66. 什么开发工具？第 25 页

67. 移动Web展望第 26 页移动Web 础辫辫是贬罢惭尝5和颁厂厂3最好的实践平台

68. 一种奥别产的延续，一种全新视觉设计

69. Native App + Web App模式结合

70. 云端应用谢谢蚕&补尘辫;础27

狠狠撸

Html5 mobile web app浅谈

Recommended

More Related Content

Similar to Html5 mobile web app浅谈 (20)

Html5 mobile web app浅谈