移动端网页快捷方式启动图是用户添加网页到主屏幕后、页面加载完成前显示的占位图，iOS需用apple-touch-startup-image link标签配绝对路径PNG图，Android Chrome 117+则依赖manifest.json中theme_color、background_color及192×192/512×512图标生成纯色启动屏。
移动端网页快捷方式启动图是什么
它不是 iOS 的 apple-touch-icon，也不是安卓 PWA 的 manifest.json 中的 icons；而是用户把网页添加到主屏幕后，点击图标瞬间、页面加载完成前显示的那张纯色或带 logo 的占位图——也就是「启动屏（Launch Screen）」。iOS 和部分安卓浏览器（如 Chrome 117+）会读取特定 link 标签来渲染它，但行为差异大，必须按平台分别处理。
iOS Safari 启动图必须用 apple-touch-startup-image
iOS 不认 manifest.json 或普通 meta，只识别 link 标签中带 apple-touch-startup-image 的 href，且要求：
- 每个尺寸必须单独声明一条
link，不能靠一张图自适应 -
href必须是绝对路径或根路径（如/images/launch-2048x1536.png），相对路径会被忽略 - 图片格式只能是 PNG，不支持 WebP 或 SVG
- 尺寸必须严格匹配设备实际分辨率（含状态栏高度），例如 iPad Pro 12.9" 第六代需
2048x2732，不是视口尺寸
常见错误是直接复用 apple-touch-icon 图片，或试图用 media query 合并多个尺寸——Safari 不解析 media 属性，只认 href 和 rel 值。
Android Chrome 从 117 开始支持 theme_color + background_color 模拟启动屏
Chrome 不渲染静态图，而是用 manifest.json 中的 theme_color 和 background_color 组合生成纯色启动屏，并在上方居中显示 icons 中 192×192 或 512×512 的图标。关键点：
-
manifest.json必须通过<link rel="manifest" href="/manifest.json">声明，且响应头需包含Content-Type: application/manifest+json -
background_color决定底色，theme_color决定地址栏颜色，两者最好一致，否则启动时有明显色差 - 图标必须是 PNG，且至少提供
sizes: "192x192"和"512x512"两档，否则 Chrome 可能 fallback 到白屏 - 若未设置
display: "standalone"，则不会触发启动屏逻辑
别指望 Android 显示你设计的启动图——它只画色块+图标，且不支持文字、渐变或自定义布局。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
兼容性兜底和调试要点
没有跨平台通用方案，真要覆盖主流场景，得同时做三件事：
- 为 iOS 声明所有可能的
apple-touch-startup-imagelink（至少覆盖 iPhone SE、iPhone 14 Pro Max、iPad Air 5） - 为 Android 提供合规的
manifest.json，确保图标尺寸、display和颜色字段齐全 - 在 HTML
<head>中加<meta name="apple-mobile-web-app-capable" content="yes">，否则 iOS 不启用全屏模式，启动图无效
调试时注意：iOS 需真机 + Safari 设置里关闭「限制网站跟踪」才可能生效；Android 要清空 Chrome 缓存并重新「添加到主屏幕」，旧缓存里的 manifest 不会自动更新。启动图资源一旦上线就很难热更新，尺寸和路径写错就得发新版本。
立即学习“前端免费学习笔记（深入）”；
