现在在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=”13888888888″>Call Me</a>可以调用打电话应用

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 scrolldemo

调试:

safari上可以设置user agent为iphone上的safari(preference->advaced->developer tool),还可以手动添加android的user agent{ Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus }

iphone的safari上有debug调试

关注Mobile性能问题,可以采用firebuglite等书签脚本来调试

文章的标题说的是web app/page,其实用html5和css3构建的app和page没啥区别,web page也很容易转换成native的app,通过phoneGap就可以了,phoneGap所做的就是在一个native的app内嵌入了一个类似chrome的浏览器,并且创建了一个桥接,从而直接去写web app就可以了,就像这个slide的标题写的一样“HTML5 is the Future of Mobile, PhoneGap Takes You There Today”,你的app可以在5个以上的平台上运行,使用的技术是你所熟悉的html/js/css,还等什么,赶快看看它的文档实践一下吧。

转自:http://adamlu.com/?p=527&cpage=1#comment-3672

  2 Responses to “使用HTML5和CSS3构建基于webkit的Web Page/App”

  1. Cheap Pandora Charms UK…

    使用HTML5和CSS3构建基于webkit的Web Page/App » Hedgehog…

 Leave a Reply

(required)

(required)

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

   
© 2012 Hedgehog Suffusion theme by Sayontan Sinha