如何使JavaScript网页在iPhone上看起来像一个应用程序

Question

如何使JavaScript网页在iPhone上看起来像一个应用程序

3

我想制作一个简单的网页，使其看起来像iPhone上的应用程序。我知道可以将书签保存到主屏幕上，这样它就像一个应用程序，我也知道可以在我的HTML中设置苹果触摸图像作为缩略图。但是当您点击主屏幕上的应用程序时，很明显这只是一个网页。如何像Google Reader一样消除顶部的URL和搜索栏？如果稍后向上滚动，看到该栏也是可以的。

当点击网页时，是否有可能直接进入全屏模式？

我不想使用类似PhoneGap的东西，我只想制作一个简单的带JavaScript的网页，使其看起来像一个应用程序，而不是实际上是一个应用程序。

- at.

3

你最好的选择是访问http://jquerymobile.com/。 - Jacob Tomlinson

3个回答

4

你需要定义一些标签，其中最重要的是apple-mobile-web-app-capable。请在这里查看完整教程： http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/

- Nick Andriopoulos

4

添加

<meta name="apple-mobile-web-app-capable" content="yes" />

然后将其保存到主屏幕后，它应该可以正常工作。

- user2157210

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SteveP · Accepted Answer

您可以在页面的头部区块中放置一些元标记。尝试这些标记：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

viewport设置宽度并控制缩放和缩小。

apple-mobile-web-app-capable通知苹果iOS应用程序可以安装到用户的主屏幕上，以便在没有菜单栏的情况下启动Safari Mobile浏览器。

apple-mobile-web-app-status-bar-style控制屏幕顶部细长状态栏的外观。

另一条有用的线是：

<link rel="apple-touch-icon-precomposed" href="myicon.png"/>

一旦安装，这将为应用程序提供自定义图标。