iPhone上的Web应用程序-使其看起来像本地iPhone应用程序

IUI是一个很好的解决方案,但我也建议 http://www.jqtouch.com/ 基于jquery。它呈放射状生长。你也可以使用谷歌集团 http://groups.google.com/group/iphonewebdev

我目前正在与IUI开发团队合作,为这个项目开发当前的CSS样式,我不得不说,我对这个小兄弟的力量印象深刻。大多数webkit函数对最终用户都是可用的,包括-webkit渐变,这样您就可以用零图像来避开大部分ui元素。 虽然您可以根据用户代理字符串不同地呈现页面,但我建议您不要这样做,因为您可以使用样式表参数来针对iPhone。

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

这允许您使用相同的HTML标记,并更改它在iPhone中的外观。

为了 iPhone OS Emulators, apple has you covered 在Windows端,它是Safari,不要忘记在dev选项中将useragent更改为iphone。但是我使用Chrome,因为它也使用WebKit引擎,所以大多数CSS在语法上是相同的。

但是,如果你做这种开发工作,大多数人都有iTouch或iPhone。您最好的选择是在2G手机上进行测试,因为它具有最高级别的限制(并且是所有CPU中最慢的)。这给了你一个扭曲的案例,如果你觉得可以接受,只会更好地为3G和3GS的人。

关于这一主题的一些重要资源包括:

Apple's Webapps Page

Apple's Developer Safari Page -包括到iPhone模拟器的链接(仅限Mac)。

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

必须阅读: iPhone Human Interface Guidelines for Web Applications - Metrics, Layout Guidelines, and Tips

Submit your WebApp

http://code.google.com/p/iui/

有关Joe Hewitt针对本机外观iPhone Web应用程序的CSS和JavaScript的信息,请参阅此处: http://ajaxian.com/archives/iphone-native-looking-skin

要模拟iPhone上网页的外观和感觉,您可以尝试以下操作: http://www.testiphone.com/ .(当然,如果你是认真的,那就使用真正的iPhone或iPod touch。)

你可以使用 jqtouch 使网页看起来和行为有点像本机iPhone应用程序的框架。作者在他的主页上有一个演示链接,你可以用你的iPhone查看。

关于测试:苹果有一个iPhone SDK,如果你已经注册成为苹果开发者,你可以下载它。但目前,我只是通过将我的iPhone指向我的dev服务器来进行测试。

您需要的所有CSS/javascript功能都记录在Apple开发者网站上。

从这里开始: http://developer.apple.com/safari/

苹果有一系列的PDF文件,描述了为iPhone和iPod定制需要做什么。

虽然你可以下载Windows和Mac版的Safari,但它的分辨率不会与iPhone或iPod相同。

苹果的iPhoneSDK实际上配备了一个iPhone模拟器,可以让你在真实版本的MobileSafari上测试你的页面。我相信这个软件只适用于Mac OS X。

• OS X 10.5 iPhone SDK Download

您必须通过iTunes认证才能下载。

如果你拥有一台Mac电脑,你应该尝试一下 Dashcode (这是iPhone SDK的一部分)。