如何使用 iOS 13 在 iPad/iPhone 上隐藏页面缩放栏

Posted 2023-02-23

【中文标题】如何使用 iOS 13 在 iPad/iPhone 上隐藏页面缩放栏

【英文标题】：How to hide page zoom bar on iPad/iPhone with iOS 13

【发布时间】：2019-10-25 08:34:26

【问题描述】：

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

有没有办法防止这种情况出现？

webapp 设置了以下元标记，其中包括：

    <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" />

【参考方案1】：

如果您打开的新页面来自其他网站，例如 oAuth 登录，我认为您还不能解决此问题。

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

  "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 生成器，因为它们使这个过程变得更加容易。在此示例中，您将在“开始 url”框下找到范围设置。

【讨论】：

谢谢。在我们的路线图中添加清单以拥有 PWA，但由于潜在的副作用，我们将其推迟至今。但我们会调查它...

与此同时，我们添加了 PWA 清单并解决了问题，谢谢。

【参考方案2】：

我有同样的问题...我只能找到一个解决方案，从工具栏左侧删除“完成”一词。

将任何重定向从location.href='yourUrl' 更改为location.replace('yourUrl')，它应该删除“完成”一词

我不能相信，我找不到我学到这一点的帖子。

它实际上停止了 Web 应用程序的重定向，这是一个很好的第一步。我将继续寻找删除该网址栏的方法... 希望这会有所帮助