Safari中的iPad WebApp全屏

时间:2010-06-11 16:20:48

标签: ipad web-applications iphone-standalone-web-app

Apple在Safari HTML reference中说下面的代码应该在iPhone OS 2.1及更高版本上全屏显示网页应用程序。

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

但它似乎不起作用。有没有办法在iPad WebApp中隐藏Safari中的标题/位置栏?

6 个答案:

答案 0 :(得分:113)

仅在将应用程序的书签保存到主屏幕后才能使用此功能。如果你只是正常浏览网站,那就没有了。

答案 1 :(得分:13)

如果您想在不启动新窗口的情况下留在浏览器中,请使用以下HTML代码:

<a href="javascript:this.location = 'index.php?page=1'">

答案 2 :(得分:12)

  1. 首先,从主屏幕启动Safari浏览器,然后转到要全屏查看的网页。

  2. 找到网页后,点按屏幕顶部的箭头图标。

  3. 在下拉菜单中,点按添加到主屏幕选项。

  4. 应显示“添加到主页”窗口。您可以自定义在iPad主屏幕上显示为标题的说明。完成后,点击“添加”按钮。

  5. 现在主屏幕上会出现一个新图标。点击图标将以全屏模式打开网页。

  6. 注意:iPad主屏幕上的图标仅在全屏模式下打开带书签的页面。您访问的下一页将包含Safari地址和标题栏。 如果网页的源代码包含以下标记,则以全屏模式播放网页或HTML5演示文稿的方式有效:

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

    您可以使用第三方工具将此标记添加到您的网页,例如iWeb SEO Tool或您喜欢的任何其他工具。请注意,您需要先添加标签,刷新页面,然后在主屏幕上添加书签。

答案 3 :(得分:7)

它仅打开第一个(书签)页面全屏。 将打开任何下一页,地址栏再次可见。 无论你在页面标题中添加什么元标记......

答案 4 :(得分:1)

此网站有一个工作解决方法,效果相同,使用一些javascript将第一个子div设置为视口的总高度。 http://webapp-net.com/Demo/Index.html

答案 5 :(得分:0)

该线程上的大多数答案似乎都没有跟上。 iPad上的iOS Safari现在已有fullscreen support,使用JavaScript实施非常容易。

这是我的完整article,内容关于如何在您的Web应用程序中实现全屏功能。