Safari中的iPad WebApp全屏答案

【问题标题】：iPad WebApp Full Screen in SafariSafari中的iPad WebApp全屏
【发布时间】：2011-03-02 18:03:41
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

看起来这个线程上的大多数答案都没有跟上。 iPad 上的 iOS Safari 现在有 fullscreen support 并且使用 javascript 很容易实现。

这是我完整的article，关于如何在您的网络应用程序上实现全屏功能。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

如果您想留在浏览器中而不启动新窗口，请使用以下 HTML 代码：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

它只会全屏打开第一页（已添加书签）。任何下一页都将打开，地址栏再次可见。无论您在页眉中放置什么元标记...

【讨论】：

【解决方案6】：

这仅在您将应用程序的书签保存到主屏幕后才有效。如果您只是正常浏览该网站，则不会。

【讨论】：

如果您将此元标记添加到您之前在 Safari 上浏览过的旧 url 网页中，您需要先刷新 url，然后将其添加到主屏幕以使元标记起作用。
这不适用于我的 laravel 项目。我将此添加到我的 app.blade 布局模板中。我的每个页面都使用它，因此标题应该（并且确实）出现在每个页面上。然而，我的 iPhone 和 iPad 上仍然有 Safari 栏，即使在进行了大量测试以清除缓存、重新创建本文中提到的主屏幕快捷方式后。还有什么可以阻止野生动物园酒吧隐藏的吗？ pastebin.com/iSFDXjFz 这是我的 app.blade.php 文件的头部。提前致谢。