在移动端Safari中，网站添加到主屏幕，导航页面时顶部和底部显示灰色条，如何使其全屏？答案

【问题标题】：In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?在移动端Safari中，网站添加到主屏幕，导航页面时顶部和底部显示灰色条，如何使其全屏？
【发布时间】：2020-12-27 15:51:55
【问题描述】：

我有一个多页网站。我使用共享菜单中的“添加到主屏幕”按钮将其添加到 iPhone 的主屏幕。

当我使用主屏幕中的图标打开它时，网站显示为全屏。但是当我转到任何具有不同路线的子页面时，例如example.com/page，我会在顶部和底部看到灰色条，显示地址、前后导航、“完成”按钮、分享按钮、在 Safari 中打开按钮.

如何让它一直全屏显示？更改路由以使用 # 不是一种选择。它在过去的某个时候工作过，但我不得不删除该应用程序，并且无法让它再次工作

【问题讨论】：

嗯，您使用的是 pwa 吗？应该有一个清单文件，您可以在其中将屏幕设置为全屏developer.mozilla.org/en-US/docs/Web/Manifest/display

标签： javascript ios mobile-safari progressive-web-apps iphone-standalone-web-app

【解决方案1】：

我自己想通了，原来我最近从 html 文件中删除了manifest.json。添加回来解决了这个问题！此外，我发现此页面有助于了解清单的工作原理https://web.dev/add-manifest/

【讨论】：