Safari中的iPad WebApp全屏

Posted 2023-02-23

【中文标题】Safari中的iPad WebApp全屏

【英文标题】：iPad WebApp Full Screen in Safari

【发布时间】：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】：

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

找到网页后，点击屏幕顶部的箭头图标。

在下拉菜单中，点击添加到主屏幕选项。

应该会显示“添加到主页”窗口。您可以自定义将在 iPad 主屏幕上显示为标题的描述。完成后，点击添加按钮。

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

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

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

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

【讨论】：

你可以说这是在ispringsolutions.com/articles/… 找到的指令的直接副本:-)

也许他们抄袭了我的。 :) 查看我回答此问题的日期，并将其与他们的发布日期进行比较。

干杯！这是一种你。 :)

【参考方案3】：

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

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

【讨论】：

这似乎与手头的问题或主题无关。或许你能解释一下它是如何关联的？

非常相关。在获得网络应用全屏之后，它始终是下一个问题。

对我来说，下一个问题是“现在页面处于全屏模式，如何刷新页面？”

【参考方案4】：

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

【参考方案5】：

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

【讨论】：

***.com/questions/6429492/…

【参考方案6】：

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

【讨论】：

如果您将此元标记添加到您之前在 Safari 上浏览过的旧 url 网页中，您需要先刷新 url，然后将其添加到主屏幕以使元标记起作用。

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