PWA遇到的一些问题。PWA的`manifest`中`display`设置的显示模式区别；PWA设置display为fullscreen时安卓上的fixed消失隐藏；在ios系统下需要的兼容性设置；

PWA的manifest中display设置的显示模式区别：

对应的显示：

PWA设置display为fullscreen时安卓上的问题

当PWA设置display为fullscreen时，如果页面底部使用了fixed，
当唤起系统键盘时，再点击消失键盘，页面底部的fixed会消失，等再次点击后，fixed会再次出现。

判断是安卓自带的底部导航栏隐藏导致的，唤起键盘，会导致底部导航栏出bug。

解决方法： 设置display为standalone

PWA在ios系统下需要的兼容性设置

iOS系统对manifest.json属于部分支持，
所以我们需要在head里给配置meta属性才能让iOS系统更加完善.

  <!-- 图标,支持尺寸匹配 -->
    <link
      rel="apple-touch-icon"
      sizes="57x57"
      href="/app-touch-icon-57x57-precomposed.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="72x72"
      href="/app-touch-icon-72x72-precomposed.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="/app-touch-icon-114x114-precomposed.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="120x120"
      href="/app-touch-icon-120x120-precomposed.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="/app-touch-icon-144x144-precomposed.png"
    />
  <!-- short_name一致,标题 -->
  <meta name="apple-mobile-web-app-title" content="">
  <!-- 显示模式,有且仅支持yes,代表Standalone -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link href="/apple_splash_2048.png" sizes="2048x2732" rel="apple-touch-startup-image" />
  <!-- 设置ios启动页 -->
<link href="/apple_splash_1668.png" sizes="1668x2224" rel="apple-touch-startup-image" />
<link href="/apple_splash_1536.png" sizes="1536x2048" rel="apple-touch-startup-image" />
<link href="/apple_splash_1125.png" sizes="1125x2436" rel="apple-touch-startup-image" />
<link href="/apple_splash_1242.png" sizes="1242x2208" rel="apple-touch-startup-image" />
<link href="/apple_splash_750.png" sizes="750x1334" rel="apple-touch-startup-image" />
<link href="/apple_splash_640.png" sizes="640x1136" rel="apple-touch-startup-image" />

在大多数情况下，如果可遮盖图标的显示效果不理想，您可以通过添加更多内边距来改善显示效果。Maskable.app 是一款免费的在线工具，用于测试和创建可遮盖式图标的图标版本。