苹果启动图生效必须严格满足：rel为apple-touch-startup-image、每个link带精确media查询、图片物理尺寸与device-width/device-height×pixel-ratio完全匹配，且仅在https+pwa安装后从主屏启动时显示。
苹果启动图 <link> 标签尺寸怎么写才生效
苹果设备（iOS/iPadOS）只认特定尺寸、命名和 <link> 属性组合的启动图，写错一个参数——比如尺寸偏差1px、rel 写成 apple-touch-startup-image（旧写法）、或漏掉 media 查询——就完全不加载。不是“差不多就行”，而是“全对才显示”。
-
rel必须是apple-touch-startup-image（注意不是apple-touch-icon） - 每个
<link>必须带media属性，且值要精确匹配设备视口宽度/高度（含方向） - 图片尺寸必须严格等于
media查询所描述的屏幕物理像素尺寸（不是 CSS 像素） - iOS 15.4+ 开始支持
viewport-fit=cover下的刘海适配，但启动图仍按传统安全区域裁切，不要用 full-bleed 尺寸
常见设备尺寸与对应 <link> 写法
别查“iPhone 14 尺寸”，直接按 iOS 启动图规范抄。以下是最常用且经实测有效的组合（基于 Safari WebKit 当前行为）：
- iPhone 竖屏（非全面屏）：
<link rel="apple-touch-startup-image" href="/splash-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> - iPhone X 及以后竖屏（带刘海）：
<link rel="apple-touch-startup-image" href="/splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"> - iPad 竖屏（非 Pro）：
<link rel="apple-touch-startup-image" href="/splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"> - iPad Pro 12.9" 横屏：
<link rel="apple-touch-startup-image" href="/splash-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)">
注意：media 中的 device-width/device-height 是逻辑分辨率（单位 px），-webkit-device-pixel-ratio 决定实际需提供的物理像素尺寸（如 375×812×3 = 1125×2436）。
为什么本地测试看不到启动图
启动图只在 PWA 安装后、从主屏幕启动时触发，且要求页面满足：HTTPS（localhost 除外）、有 manifest.json、且用户已点击“添加到主屏幕”。开发阶段常见失效原因：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用 HTTP 访问（非 localhost）——Safari 直接忽略所有
apple-touch-startup-image - 图片路径 404 或返回非 PNG（WebP、JPEG 不支持）——不会报错，但静默失败
- 图片尺寸与
media查询不一致（哪怕只差 1px）——WebKit 拒绝渲染 - 在 Safari 浏览器内直接刷新页面——启动图机制不触发，必须从主屏幕图标启动
更省事但有限制的替代方案：apple-mobile-web-app-capable
如果只要“全屏启动感”，不强求定制图片，可以放弃启动图，改用状态栏控制 + 全屏模式：
- 加
<meta name="apple-mobile-web-app-capable" content="yes"> - 加
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> - 配合
manifest.json的display: "standalone"
这样能跳过所有尺寸匹配问题，但用户首次打开时会看到白屏闪一下（无启动图缓冲），且无法控制首帧视觉内容。真要品牌露出，还是得老老实实按设备出图。
最麻烦的点不在写代码，而在验证——每换一台真机，就得重新测一遍 media 是否命中、图片是否被加载。模拟器基本没用，Safari 的启动图逻辑只在真实设备上完整实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
