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

Question

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

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

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

Answer 1

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

<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"/>

一旦安装,它将为应用程序提供自定义图标.