apple-touch-startup-image 在现代 iOS 上已失效，因 iOS 8 起移除支持、iOS 15.4 彻底废弃；现唯一可靠方案是 PWA + manifest.json（含 192x192/512x512 PNG 图标、display: "standalone"、HTTPS 等严格条件）。
为什么 apple-touch-startup-image 在现代 iOS 上基本失效
它已经不被 Safari 和 WebKit 支持了。从 iOS 8 开始，系统就移除了对 apple-touch-startup-image 的解析逻辑；iOS 15.4 后彻底废弃该 meta 标签。你加了也不会加载，控制台不会报错，但图片就是不会显示——这是最坑的地方。
常见错误现象：<meta name="apple-touch-startup-image" content="..."> 写了，真机测试完全没反应；用 Safari 的响应式调试模式也看不到任何加载痕迹。
- 仅适用于 iOS 6–7 的老旧 Web App（且需添加到主屏幕）
- 不支持高分辨率设备（如 iPhone X 及以后的刘海屏、动态岛机型）
- 无法适配不同屏幕尺寸和方向，必须为每种尺寸单独声明，极易遗漏
现在唯一可靠的方式：PWA + manifest.json 的 icons 和 start_url
iOS 从 Safari 16.4（iOS 16.4+）起开始支持 PWA 安装，并能通过 manifest.json 中的 icons 自动生成启动画面（splash screen），前提是满足严格条件：
-
manifest.json必须通过<link rel="manifest" href="/manifest.json">正确引入，且返回Content-Type: application/manifest+json -
manifest.json中必须包含至少一个192x192和一个512x512的icon（格式为png，无透明通道更稳） -
display字段必须设为"standalone"或"fullscreen"（"minimal-ui"不触发 splash） - 页面必须通过 HTTPS 提供（localhost 除外）
示例 manifest.json 片段：
立即学习“前端免费学习笔记（深入）”；
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
如果必须兼容老 iOS 或非 PWA 场景，只能靠 JS 模拟启动画面
没有真正的“启动画面”可配置，但可以快速盖一层静态图，在首屏渲染完成后再移除——这虽不是系统级 splash，却是目前最可控的替代方案：
- 在
里内联一段极简 CSS，把#splash固定全屏、居中、隐藏滚动条 - 在
顶部立即插入<div id="splash"><img src="/splash.png" alt="如何通过HTML的apple-touch-startup-image配置iOS启动画面的闪屏图片" ></div> - 用
document.addEventListener('DOMContentLoaded', ...)或更稳妥的requestIdleCallback移除 splash - 注意：图片要小（建议 ≤ 100KB），避免阻塞首屏；不要依赖
window.onload，它等资源太多，延迟明显
关键点：iOS WebKit 对 CSS 动画和 transform 渲染较慢，splash 的 fade-out 动画建议用 opacity + transition，避免触发布局重排。
容易被忽略的细节：图标尺寸、命名与缓存
即使用了 PWA 方案，很多团队仍卡在图标上。iOS 对 icon 尺寸非常敏感，比如：
- iPhone 14 Pro Max 竖屏启动画面会优先取
1024x1024icon，但若 manifest 里只提供512x512，系统会拉伸并模糊 - 文件名带查询参数（如
icon.png?v=2）可能被 Safari 缓存策略忽略，导致新图标不生效 - 修改
manifest.json后，旧版 Safari 会强缓存它，必须清空网站数据或改文件名才能刷新 -
background_color必须是十六进制（如"#ffffff"），不能用rgb()或命名色
真正起作用的从来不是某个 meta 标签，而是整个 PWA 配置链的完整性——漏掉任意一环，splash 就不会出现。
