PWA 无法在 iphone/ipad 上以全屏模式打开答案

【问题标题】：PWA not opening in full screen mode on iphone/ipadPWA 无法在 iphone/ipad 上以全屏模式打开
【发布时间】：2018-10-30 09:36:50
【问题描述】：

我在 ios 上浏览了几篇与 PWA 相关的文章，但仍然无法弄清楚为什么在将应用程序添加到主屏幕后会看到地址栏。如果有人可以帮助我，我会很高兴。

我的索引文件中的元标记

  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="manifest" href="./assets/manifest.json">
  <meta name="theme-color" content="#ffffff">

清单文件

{
    "short_name": "Dashboard",
    "name": "Dashboard",
    "icons": [
      {
        "src": "logo.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "start_url": "/home",
    "display": "standalone",
    "theme_color": "#000",
    "background_color": "#000"
  }

【问题讨论】：

您可以查看link 中给出的解决方法。由于您已经在清单文件中使用了"display": "standalone"，您可以尝试"display": "fullscreen" 看看它是否有效。

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

【解决方案1】：

万一有人偶然发现这篇文章。截至 04-2020 iOS 不会读取清单文件来设置 PWA 屏幕模式。相反，需要添加他们的meta 标签：

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

用于以全屏模式查看应用程序。并且：

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

用于将状态栏设置为与页面<body> 相同的颜色。还有其他可用选项：black 和 white。

【讨论】：

你有这个的参考链接吗？