apple-touch-startup-image 在 iOS 15.4+ 中重新支持,需用 <link rel="apple-touch-startup-image"> 配合精确 media 查询声明多尺寸 PNG 启动图,图片须无透明通道、正确命名放置,且 Web App 必须通过“添加到主屏幕”以 standalone 模式运行。

要在 iOS 设备上为 Web App 设置启动时显示的 Apple Splash 屏幕(即“添加到主屏幕”后全屏打开时的首屏画面),不能用 <link> 标签直接关联普通图片,而是必须按 Apple 官方规范提供特定尺寸、命名和放置方式的 PNG 图片,并通过 <link rel="apple-touch-startup-image"> 正确声明。
使用正确的 link 标签语法
在网页 <head> 中添加如下标签(注意:iOS 15.4+ 才支持 rel="apple-touch-startup-image" 的现代写法):
- 针对较新 iOS(15.4+):用
rel="apple-touch-startup-image",并配合media属性指定设备尺寸与方向 - 每个
<link>对应一个精确尺寸的 PNG 文件,不可缩放或裁剪 - 图片必须是纯 PNG 格式(无透明通道更稳妥),放在可公开访问的路径下
提供多尺寸适配的图片文件
iOS 启动图需严格匹配设备分辨率与状态栏位置。常见尺寸包括:
- iPhone SE / 8 / X / XR 竖屏:
750×1334 - iPhone 12/13/14 竖屏:
1170×2532 - iPhone 12 Pro Max / 14 Plus 竖屏:
1284×2778 - iPad Pro 12.9"(第5代+)横屏:
2048×2732
建议将所有图片统一放在 /images/splash/ 目录下,例如:splash-1170x2532.png。
立即学习“前端免费学习笔记(深入)”;
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
在 head 中声明多个 link 标签
每个尺寸对应一条 <link>,示例:
<link rel="apple-touch-startup-image" href="/images/splash/splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="/images/splash/splash-1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="/images/splash/splash-1284x2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="/images/splash/splash-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
务必确保 media 查询与目标设备完全一致,否则 iOS 会忽略该条目。
验证与注意事项
不生效的常见原因:
- 图片返回 HTTP 404 或 MIME 类型不是
image/png - 服务器未启用缓存头,导致 iOS 拒绝加载(建议设置
Cache-Control: public, max-age=31536000) - Web App 未通过 Safari “分享 → 添加到主屏幕” 安装(仅当以 PWA 方式运行才触发 Splash)
- 未在
manifest.json中配置"display": "standalone"(虽非强制,但推荐)
测试时请使用真机 + 最新版 iOS,模拟器不支持此特性。


















