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

Question

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

有没有办法避免这种情况的出现？

网络应用程序已设置以下元标记等:

    <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 登录，我认为您还无法解决此问题。

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

{
  "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 目录中的所有文件和页面都将像普通 native 应用程序一样在 PWA 中工作(即没有弹出窗口)。此范围之外的所有文件都将在普通 Web 浏览器中打开，并带有 PWA 的后退按钮。它并不理想，但确实提供了比以前更好的用户体验。您可以阅读有关范围设置的更多信息 here .

我建议使用像this one这样的manifest.json生成器，只是因为它们使这个过程变得更加容易。在此示例中，您将在“起始网址”框下找到范围设置。