升级到iOS 11.3后，web应用程序未能根据apple-mobile-web-app-capable显示全屏。

Question

我有一个包含meta的网页应用

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

iOS 11.3之前，“添加到主屏幕”后，它将像独立应用程序一样打开，没有导航栏。

在11.3之后，它现在在浏览器中带有导航栏打开。

- gae123

Answer 1

经过数小时的故障排查，我找到了一些可能对他人有帮助的信息。

针对Android/Chrome的兼容性，我的HTML文件中已经包含以下内容：

<link rel="manifest" href="/manifest.json">

manifest.json没有"display": "standalone"条目，只定义了图标和名称。在11.3之前，Safari会忽略该文件，但现在它被认为比meta标签apple-mobile-web-app-capable更重要。由于display:的默认值是browser,应用程序在带有导航栏的浏览器中打开。

当我在清单文件中添加了"display": "standalone"行时，问题消失了。

- gae123

---

谢谢你，你帮我省去了数小时的周末调试时间。"display": "standalone" 解决了问题。 - terrymorse

如果没有 Stack Overflow，我们早就像 IE5 一样放弃 iOS 了。 - mseddon

@terrymorse 我已经在我的 manifest.json 文件中添加了 "display": "standalone"，但仍然存在问题，有什么想法吗？当执行“添加到主屏幕”操作时，标题和图标被使用，所以 manifest.json 文件肯定是已经加载了。 - riper

@riper - 在iOS 12.2发布后，我在独立模式下发现了几个问题。我的暴力解决方法是从HTML文件中删除<link rel="manifest">标签，并使用三个“apple-mobile-web-app.*”元标签。并不理想。 - terrymorse

@terrymorse 在你的更改后，它在Android上是否继续工作？ - riper

@riper - 抱歉我没有在安卓上测试过它。 - terrymorse

Answer 2

我也遇到了这个问题。@gae123关于manifest.json的说法是正确的。您还可以尝试删除任何与苹果特定meta标签冲突的内容，这些标签可以在此处查看：Apple Doc。我还发现，在json中使用"display":"fullscreen"就可以解决问题，但具体情况可能有所不同。

- Ross

---

非常准确的自我回答。你已经为我们节省了一天甚至更多的时间。 - mseddon