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

Question

I went through several articles related to PWA on ios but still not able to figure out why I am seeing address bar after adding an app to the home screen.我在 ios 上浏览了几篇与 PWA 相关的文章，但仍然无法弄清楚为什么在将应用程序添加到主屏幕后会看到地址栏。 I would be glad if someone could help me with this.如果有人可以帮助我，我会很高兴。

meta tags in my index file我的索引文件中的元标记

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

Manifest File清单文件

{
    "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"
  }

Answer 1

In case anyone stumble on this article.万一有人偶然发现这篇文章。 As of 04-2020 iOS does not read the manifest file to set the PWA screen mode.截至 2020 年 4 月，iOS 不会读取清单文件来设置 PWA 屏幕模式。 Instead one needs to add their meta tags:相反，需要添加他们的meta标记：

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

For viewing the app in full screen mode.用于以全屏模式查看应用程序。 And:和：

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

For setting the status bar the same color as page <body> .用于将状态栏设置为与页面<body>相同的颜色。 There are other options available: black and white .还有其他选项可用： black和white 。

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

问题描述

1 个解决方案

解决方案1
3 2020-04-26 16:44:52

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

问题描述

1 个解决方案

解决方案1 3 2020-04-26 16:44:52

解决方案1
3 2020-04-26 16:44:52