使用HTML5和CSS3构建基于webkit的WebPageApp.docVIP

使用HTML5和CSS3构建基于webkit的Web Page/App 现在在ios/android上的web网站变的越来越多，智能机中ios和android系统的设备市场份额也是与日俱增，相信未来会是一个趋势，那么如何构建基于webkit的网站呢？这里有一篇文章介绍了如何用html5创建一个iphone的app，这是一个基于web的本地离线应用，相对于native应用来说基于web的应用开发和测试都非常快捷，基于webkit浏览器支持大部分的html5，也支持大部分的css3，而且开发语言也是大多数web工程师所熟悉的，最重要的一点是基于web的应用是完全跨平台的，不需要多平台的开发和测试。 开发基于webkit的web app/page时需要注意的有： HTML特性： input type ”file” / 在iphone上不work a href ”1座机电话号码88″ Call Me 可以调用打电话应用 google maps, iTunes和youtube的链接会在iphone上打开相应的组件 app/web page设置： link rel ”apple-touch-icon” href ”iphon_tetris_icon.png”/ 在设置书签的时候可以显示好看的图标 meta name ”apple-mobile-web-app-capable” content ”yes” / 离线应用的另一个技巧 meta name ”apple-mobile-web-app-status-bar-style” content ”black” / 隐藏状态栏 link rel ”apple-touch-startup-image” href ”startup.png” / 设置开始页面图片 meta name ”viewport” content ”width device-width, user-scalable no” / 指定mobile，并且不可缩放 meta name ”viewport” content ”width device-width, minimum-scale 1.0, maximum-scale 1.0″ / 同上 CSS相关配置： @media screen and max-device-width: 480px /* 小屏幕的css样式 */ @media screen and max-width: 320px /* 纵向的css样式 */ @media screen and max-width:480px /* 横向的css样式 */ @media screen and orientation: portrait /* iPad 纵向的css样式 */ @media screen and orientation:landscape /* iPad 横向的css样式 */ display: -webkit-box; -webkit-box-orient:vertical/horizontal; -webkit-box-flex: value 水平垂直布局box rounded corner/text shadow/box shadow/rgba/font-face/transform/transition/animation/border-image/gradients/ 充分利用这些css3的特性做出丰富的UI 脚本特性： 可以选用开源的javascript库，如yui, jquery, mootools, dojo … 垂直的js库，如canvas游戏库有LimeJs, GameJs等，Mobile UI库如jquery mobile, sencha touch, iui等，以及其它各种库 隐藏标题栏 – addEventListener “load”, function setTimeout function window.scrollTo 0,1 ; , 0 ; , false ; webkitTransitionEnd/webkitAnimationStart/webkitAnimationIteration/webkitAnimationEnd transition/animation事件 localstorage/manifest 离线应用 模拟iphone的scroll效果，解决Mobile Safari下不支持position:fixed的问题：touch scroll,?demo 调试： safari上可以设置user agent为iphone上的safari（preference- advaced- devel