logo标签列表

iPhone上的Web应用 - 如何将其样式设置得像本地iPhone应用程序

iphonehtmlcssweb-applicationsbrowser
8

我看到有些网页在iPod Touch（和iPhone）上显示方式与原生iPhone应用程序非常相似。

这种效果可以通过样式来实现，并且可以根据请求中的用户代理在服务器端呈现不同的HTML内容。

那么，我该如何获得这种效果？此外，是否有 iPhone OS 浏览器模拟器，以便在真正发布之前测试我的应用程序，看它是否能正常显示？

5个回答
4
我目前正在与iUI开发团队一起为项目设计当前CSS样式，我不得不说我对这个小浏览器的强大印象深刻。大多数Webkit功能都可供最终用户使用，包括-webkit-gradients，因此您可以在零图像的情况下获得大多数UI元素。 虽然您可以根据User-Agent字符串以不同方式呈现页面，但我建议避免这样做，因为您可以通过样式表参数针对iPhone。
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

这使您可以使用相同的HTML标记，并为您的iPhone更改其外观。

对于iPhone OS模拟器，苹果公司已经考虑到了这一点，在Windows侧面是Safari，请不要忘记在dev选项中将用户代理更改为iPhone。然而，我使用Chrome，因为它也使用webkit引擎，所以大多数CSS在语法上都是相同的。

然而，大多数人都有iTouch或iPhone，如果您正在进行这种开发工作，则最好在2G手机上进行测试，因为它具有最高级别的限制（并且所有CPU中最慢）。这给您提供了一个最坏的情况，如果您认为可以接受，那么对于拥有3G和3GS的人来说只会变得更好。

关于此主题的一些很棒的资源包括：

苹果公司的Web应用程序页面

苹果公司的开发人员Safari页面- 包括iPhone模拟器链接（仅限MAC）。

ADC: Safari 参考库

ADC SRL: 开始使用 Web 应用程序

ADC SRL: 开始使用 iPhone Web 应用程序

存档：iPhone Web 应用程序人机界面指南 - 指标、布局准则和提示

1
2
我会使用一个基于Webkit的浏览器来访问testiphone网站，因为iPhone浏览器就是基于Webkit开发的。这样可以最接近实际的iPhone浏览器。 - Ben S
1
你可以使用 jqtouch 框架使你的网页看起来和行为有点像本地 iPhone 应用程序。作者在他的主页上有一个演示链接，你可以使用你的iPhone进行查看。
关于测试：苹果公司有一个 iPhone SDK 可供下载，如果你已经注册成为苹果开发者。但目前，我只是通过将我的 iPhone 指向我的开发服务器进行测试。
如果我实际上没有iPhone，那就是个问题 :) - kender
1
如果你要做 iPhone 网站，最好还是买一台。模拟器虽然很棒，但实际上比真正的 iPhone 快得多（有时也会出现不同的问题）。 - ceejayoz
我肯定会买一个（可能是iPod touch，因为我不需要另一部手机）。网络应用程序并不仅限于iPhone用户，这只是为了让iPhone用户感觉像使用应用程序一样的想法。因此，在将其实际推出之前，我会先获得实际设备，但在那之前，这只是我可以避免的另一笔开支 :) - kender
0

您需要的所有CSS/Javascript功能都在苹果开发者网站上有详细说明。

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

苹果有一系列的PDF文档，描述了如何为iPhone和iPod进行自定义。

尽管您可以在Windows和Mac上下载Safari，但它的分辨率设置与iPhone或iPod不同。

-1

苹果的iPhone SDK实际上附带有一个iPhone模拟器，允许您在真实版本的移动Safari上测试您的页面。我相信这个软件仅适用于Mac OS X。

您需要使用iTunes凭据进行身份验证才能获得下载。

如果您已经安装了Xcode和Dashcode，则iPhone模拟器也随之安装。我很懒，只需在Dashcode中启动一个空项目并运行它，模拟器就会弹出。 - PurplePilot
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接