Question

我浏览了几篇有关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"
  }

Answer 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。

无法在iPhone / iPad上以全屏模式打开PWA

1 个答案: