如何在装有iOS 13的iPad / iPhone上隐藏页面缩放栏

Question

我们有一个从Safari添加到主屏幕的Web应用。它是用Ionic / Angular构建的。现在，只要我们切换到应用程序中的另一个页面，就会在顶部出现白色栏，您可以在其中更改页面缩放并访问其他设置（在移动和台式机网站之间进行更改，并访问其他网站设置）。它覆盖了Web应用程序的一部分，当您单击左侧的“完成”时，它消失了-直到您访问另一个页面，然后它再次出现。在iPad和iPhone，iOS 13.1和13.2（测试版）上，行为相同。

是否有防止这种情况出现的方法？

Web应用程序设置了以下元标记，以及其他：

    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-title" content="MyWebApp">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Answer 1

[如果您要打开的新页面来自其他网站，例如oAuth登录，我认为您尚无法解决此问题。

但是，如果新页面位于同一域中，则只需在网络应用清单中调整应用范围即可。如果您还没有清单，它看起来像这样：

{
  "name": "My web app",
  "short_name": "Web App",
  "description": "This is a web app",
  "lang": "en-GB",
  "start_url": "/app/home.html",
  "scope": "/app/",
  "display": "standalone"
}

该作用域项目意味着app目录中的所有文件和页面都将像正常的本机应用程序（即没有弹出窗口）一样在您的PWA中工作。超出此范围的所有文件都将在普通的Web浏览器中打开，并带有指向PWA的后退按钮。这不是理想的选择，但确实提供了比以前更好的用户体验。您可以阅读有关范围设置here的更多信息。

我建议使用清单文件this one之类的manifest.json生成器，因为它们使此过程变得非常容易。在此示例中，您可以在“起始网址”框中找到范围设置。