3

我想让一个带有 JavaScript 游戏的简单网页看起来像 iPhone 上的应用程序。我知道我可以将书签保存到主屏幕,它看起来像一个应用程序,我知道我可以在我的 HTML 中为缩略图设置 apple-itouch-image。但是当你点击主屏幕上的应用程序时,很明显这只是一个网页。我怎样才能像谷歌阅读器一样摆脱顶部的 URL 和搜索栏?如果您稍后向上滚动,可以看到该栏。

单击网页时是否可以直接进入全屏模式?

我不是在寻找像 PhoneGap 这样的东西,我只是想用 JavaScript 制作一个简单的网页看起来像一个应用程序,我不希望它实际上是一个应用程序。

4

3 回答 3

10

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

<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通知 Apple iOS 应用程序可以安装到用户跳板,这样它就可以在没有菜单栏的情况下启动 Safari Mobile 浏览器

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

另一个有用的行是:

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

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

于 2013-03-19T16:28:43.833 回答
4

您需要定义一些<meta>标签,最值得注意的是apple-mobile-web-app-capable. 在此处查看完整教程http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/

于 2013-03-19T16:28:03.227 回答
4

添加

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

然后它应该在保存到主屏幕后工作。

于 2013-03-19T16:28:54.727 回答