如何为iOS端React开发的PWA配置通用启动屏？

可以实现只用一个启动屏适配所有iOS设备，以下是两种实用方案：

方案1：使用SVG矢量启动屏 #

SVG是矢量格式，能无损适配任意屏幕尺寸和分辨率，无需针对不同设备写媒体查询。

1. 制作包含品牌标识的SVG启动屏，设置合适的viewBox确保缩放时内容居中不拉伸。示例SVG结构：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <!-- 自定义背景和品牌内容，示例为白色背景+蓝色圆形图标 -->
  <rect width="100%" height="100%" fill="#ffffff" />
  <circle cx="500" cy="500" r="200" fill="#007AFF" />
</svg>

2. 在public/index.html中直接引入该SVG作为启动屏，无需媒体查询：

<link rel="apple-touch-startup-image" href="/images/splash-screen.svg">

这种方式兼容所有支持SVG的iOS版本，维护成本极低，只需修改SVG文件即可更新启动屏。

方案2：利用Web App Manifest（iOS 15+） #

iOS 15及以上版本支持Web App Manifest中的splash_screen字段，只需提供一张高分辨率图片，系统会自动缩放适配不同设备和横竖屏。

1. 准备一张高分辨率图片（建议尺寸2732x2732，覆盖当前所有iOS设备的最大分辨率），保存到public/images/splash-highres.png。

2. 在public/manifest.json中添加启动屏配置：

{
  "name": "你的PWA名称",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "splash_screen": {
    "image": "/images/splash-highres.png",
    "background_color": "#ffffff",
    "display": "standalone",
    "media": "(orientation: portrait)"
  },
  "splash_screens": [
    {
      "image": "/images/splash-highres.png",
      "background_color": "#ffffff",
      "display": "standalone",
      "media": "(orientation: landscape)"
    }
  ]
}

3. 确保public/index.html中引入了manifest：

<link rel="manifest" href="/manifest.json">

注意：iOS 14及以下版本不支持该字段，若需兼容旧版，可同时保留方案1的SVG配置，系统会自动选择合适的启动屏。

内容的提问来源于stack exchange，提问作者Srilaya