代码之家  ›  专栏  ›  技术社区  ›  Rajat Badjatya

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

  •  1
  • Rajat Badjatya  · 技术社区  · 6 年前

    索引文件中的元标记

      <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"
      }
    
    0 回复  |  直到 6 年前
        1
  •  0
  •   z-x    5 年前

    以防有人无意中读到这篇文章。自2020年4月起,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 .