iOS Web 应用程序（尤其是 iPad）的多个“apple-touch-startup-image”分辨率？
Posted
技术标签:
【中文标题】iOS Web 应用程序（尤其是 iPad）的多个“apple-touch-startup-image”分辨率？【英文标题】：Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)? 【发布时间】：2011-06-08 22:21:08 【问题描述】：我编写了一个基于 html5 的 ios Web 应用程序，一切似乎都运行良好，但我正在尝试使用多个启动屏幕来完善它。 iPhone/iPod touch 可以很好地使用 320x460 的 PNG，如下所示：
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
我发现大量文档说 iPad 的启动图像应该像 iPhone/iPod touch 一样，从高度削减 20 像素以适应状态栏，分辨率为 768x1004（纵向）或 1024x748（横向） .但是，在我的测试中（当前使用运行 iOS 3.2.2 的 iPad），只有 768x1004（纵向）分辨率有效（但在横向模式下是不正确的——20px 太窄了）。
我尝试了以下方法（基于apple-touch-icon 链接的功能的疯狂猜测），但无济于事：
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />
如果是列出的最后一个 link 元素，则只有 768x1004 分辨率的图像有效。如果最后一张是 1024x748 分辨率的图像，则会渲染灰色背景（但绝不会是 768x1004）。所以，显然apple-touch-startup-image link 不支持sizes 属性。
iOS 的较新版本是否支持此功能？有没有办法支持多个启动图像？我应该创建一个 1024x768 的启动图像吗？如果是这样，iPhone/iPod touch 会按比例缩小吗？或者，我应该放弃并且没有 iPad 的启动图像吗？
【问题讨论】：
morgant - 谢谢你的好问题！只是出于好奇...您知道是否可以为 iphone 4 指定高分辨率启动屏幕（即 640x920）？ 我的回答满足你的问题了吗？如果是这样，您可以选择它作为答案吗？谢谢 根据 Apple (developer.apple.com/library/content/documentation/…)，您所说的第一张图片是 320 x 460 应该是 320 x 480。 @alej27 感谢您指出这一点，我相信自我最初提出问题以来，过去 5 年的大小发生了变化（那个时期的许多答案都包含相同的初始值。） 【参考方案1】：针对 iPad 和 iPhone（横向 || 纵向）和（视网膜 || 非）startup-image 和 touch-icons 的最终解决方案：
<!-- iPhone ICON -->
<link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<!-- iPad ICON-->
<link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<!-- iPhone (Retina) ICON-->
<link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<!-- iPad (Retina) ICON-->
<link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">
<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6/7/8 -->
<link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 6 Plus/7 Plus/8 Plus -->
<link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
【讨论】：
第三个link标签中是否需要packaging/？
对于那些到达这里并想要 iPhone 5 启动图像大小的人：***.com/a/12471432
通过测试，我发现retina iPad是使用这个配置的非视网膜图像。在下面查看我的答案，感谢 Pavel 我创建了一个固定版本。
对于 iphone5 图像必须是 640 像素 x 1096 像素对不起：\
“iPad (Retina, Landscape) SPLASHSCREEN”的设备宽度应该是 768 而不是 1536。【参考方案2】：
我实际上让它在横向模式下工作。我在这里得到了信息：https://gist.github.com/472519。
问题是横向图像必须是 748x1024（横向图像，我顺时针旋转）而不是 1024x748。
我还必须先以纵向模式启动应用程序，然后再以横向模式启动应用程序。
【讨论】：
非常有用的链接，非常感谢！ - 这使它对我有用。 我要强调的是，您必须先以纵向模式启动 iPad！至少在 4.3.3 中你会这样做。【参考方案3】：我只是想提供一个实际有效的答案组合。我们发现选择的答案没有使用视网膜版本的初始图像。 Pavel 的回答修复了 iPad 的视网膜版本。以下内容已在 iPhone（视网膜和非视网膜）和 iPad（视网膜和非视网膜）上进行了测试。
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (non-Retina) (Portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
这一切我都不敢恭维，但这种配置是有效的。只需复制和粘贴，确保图片的大小与其名称中指定的完全一致。
【讨论】：
谢谢，这有效，但仅当图像位于根目录中时。 是的，好电话，我不确定将它们放在根目录中是好是坏。我只是按照我对 favicon 的旧想法，如果 favicon 位于根目录中，其他较新的“favicon”也可以这样做。 @JacobMouka 不一定在根目录中。路径相对于 html 文件所在的目录。 @Andrej 我输错了。我不是指根文件夹，而是与 html 页面相同的目录。当链接的 href 包含任何路径时，启动图像不会加载（但图标确实......如图）。 Works On My Machine™ 应用了路径，例如href="img/apple-touch-startup-image-320x460.png" 只要它相对于提供页面的路径。在普通桌面浏览器中使用开发者工具，检查图片地址是否正确...【参考方案4】：
这个答案提供了一种方便的方法来生成 iOS 当前所需的所有 20 个启动画面 + iOS 12.1 的最新 HTML 标记。
这包括适用于 iPhone XR、iPhone XS Max 和 11" iPad Pro 的解决方案
上下文
iOS 上的 Safari 现在支持渐进式 Web 应用程序，但实现方式与 Chrome 不同。它确实读取了manifest 文件，但它忽略了其中声明的图标。
相反，Safari 需要一个 apple-touch-startup-image 标签列表。而the official Apple docs 列出这个例子：
<link rel="apple-touch-startup-image" href="/launch.png">
...这是一种误导，因为（至少从 iOS 12.1 开始），一个 图像是不够的，并且无法正常工作。相反，Safari 期望每个分辨率一张图片。
如果启动画面丢失或不正确，加载时会显示一个白屏，这看起来不专业，并且让（网络）应用程序感觉很慢。
生成启动画面
网上有 apple-touch-startup-image 生成器，但它们要么坏了，要么完全忽略了 Landscape，而且它们的命名约定也不是那么好。这更容易。
在包含 logo.png 文件的目录中以 bash 的形式运行以下命令，它将生成 Safari 预期的 20 张图像（纵向和横向各有 10 个分辨率）：
array=( 0640x1136 0750x1334 0828x1792 1125x2436 1242x2208 1242x2688 1536x2048 1668x2224 1668x2388 2048x2732 )
for i in "$array[@]"
do
split=($i//x/ )
portrait=$i
landscape=$split[1]x$split[0]
gm convert -background white -geometry $((10#$split[0] / 5)) "logo.png" -gravity center -extent $portrait splash-portrait-$portrait.png
gm convert -background white -geometry $((10#$split[0] / 5)) "logo.png" -gravity center -extent $landscape splash-landscape-$landscape.png
done
这依赖于 GraphicsMagick，它是 ImageMagick 的更好替代品。 （在 macOS 上，使用 brew 安装就像 brew install graphicsmagick 一样容易。
标记
这是所有 20 个文件的 HTML 标记：
<!--
# SPLASH SCREENS FOR iOS.
#
# If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional
# and makes the (web)app feel slow.
#
# Constraints:
# - Cannot use a single image for all.
# - The size of the image must fit that of the targeted device, else no splash screen will show.
# - There seems to be some leeway (e.g.: pictures 40px and 60px shorter did work), but unclear how much.
# Bottom-line: you need one splash screen per resolution and orientation.
#
#
# List of devices and resolutions (AUG-2019):
#
# Device Portrait size Landscape size Screen size Pixel ratio
# iPhone SE 640px × 1136px 1136px × 640px 320px × 568px 2
# iPhone 8 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone 7 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone 6s 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone XR 828px × 1792px 1792px × 828px 414px × 896px 2
# iPhone XS 1125px × 2436px 2436px × 1125px 375px × 812px 3
# iPhone X 1125px × 2436px 2436px × 1125px 375px × 812px 3
# iPhone 8 Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone 7 Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone 6s Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone XS Max 1242px × 2688px 2688px × 1242px 414px × 896px 3
# 9.7" iPad 1536px × 2048px 2048px × 1536px 768px × 1024px 2
# 7.9" iPad mini 4 1536px × 2048px 2048px × 1536px 768px × 1024px 2
# 10.5" iPad Pro 1668px × 2224px 2224px × 1668px 834px × 1112px 2
# 11" iPad Pro 1668px × 2388px 2388px × 1668px 834px × 1194px 2
# 12.9" iPad Pro 2048px × 2732px 2732px × 2048px 1024px × 1366px 2
#
# Sources:
# - Device and resolutions (Portrait size, Landscape size) from https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/
# - Screen width as measured by javascript's `screen.width` and `screen.height` in Simulator, except for:
# - 7.9" iPad mini 4 (not in Simulator): https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
# - 9.7" iPad (not in Simulator): had to assume they meant iPad Pro.
#
#
# Tested on the following devices, in Simulator with iOS 12.1, in both Portrait and Landscape:
# iPhone 5s, iPhone 6, iPhone 6 Plus, iPhone 6s, iPhone 6s Plus, iPhone 7, iPhone 7 Plus, iPhone 8,
# iPhone 8 Plus, iPhone SE, iPhone X, iPhone XS, iPhone XS Max, iPhone XR, iPad Air, iPad Air 2,
# iPad (5th generation), iPad Pro (9.7-inch), iPad Pro (12.9-inch), iPad Pro (12.9-inch) (2nd generation),
# iPad Pro (10.5-inch), iPad (6th generation), iPad Pro (11-inch), iPad Pro (12.9-inch) (3rd generation).
# Everything worked fine (splash screen showing in every single case.)
#
# FYI:
# - tvOS does not come with a browser. So the largest screen to care for is an iPad.)
# - On all iPads (in Simulator), had to either Add to Home twice or restart the device to see the icon.
# WOULDDO Test on a real iPad.
-->
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0750x1334.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="/assets/site/img/splash/splash-portrait-0828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1136x0640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1334x0750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1792x0828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2436x1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2688x1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2048x1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2224x1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2388x1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
（就我个人而言，我将 cmets 保存在 Twig 注释块中，这样我就可以保留信息，而不会用过多的文本污染客户的信息。）
我在网上看到的一些示例使用了min-device-*，但在这种情况下这没有什么意义，因为 Safari 需要（接近）精确尺寸的图片。
我看到的其他一些示例使用更短的图像（短 40 或 60 像素，即没有状态栏）。旧版本的 iOS 似乎已经预料到了这样的尺寸，但现在已经不是这样了。
离别的想法
我的 iOS 用户中有 96% 使用 iOS 12.x，所以谢天谢地，无需太在意旧的 iOS 版本。但如果我遗漏了什么，请告诉我。
Android 就像一个大男孩一样，乐于将应用程序的图标显示为初始屏幕的一部分，而 iOS 和 Safari 则迫使我们完成所有这些额外的工作。 20张图片展示一个简单的闪屏！这太疯狂了！未来可能会变得更好，但目前就是这样。
这项基本任务需要大量编码和测试。我希望它会帮助别人。
我会尝试使用更新的分辨率更新此内容。如果您发现缺少一个，请发表评论。
【讨论】：
感谢您的见解！这是迄今为止我见过的最完整的闪屏声明列表。虽然媒体查询在 iOS 上运行良好，但我在新 iPadOS 上遇到了一个问题。(orientation: landscape) 部分似乎在这里不起作用，因为它始终显示设备的纵向版本。然后图像在横向模式下会出现扭曲以适应宽度。这是一个错误吗？
嘿@debite 您是否设法找到解决方向不起作用的解决方案？我好像遇到了同样的问题！
@nickw444 你们有人解决过这个问题吗？我目前正在为 PWA 的启动图像在横向模式下拉伸而苦苦挣扎。就是简单的把人像图片缩放到适合屏幕，当然看起来很丑！
这段代码有些过时了。它缺少 iPhone 12 尺寸。
iPhone 12 Mini、12（和 Pro）和 12 Pro Max 为 1080x2340、1170x2532、1284x2778，像素比为 3【参考方案5】：
如果一个链接元素缺少媒体属性，那么我就无法正常工作。该代码在 iPhone 3G 和 iPad 上成功显示了启动图像（纵向和横向模式） .
<-- iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="images/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<-- iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<-- iPhone - (320x460) -->
<link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />
无法在 iPhone4（高分辨率）上试一试，但很可能它的工作方式相同。
【讨论】：
啊哈，我没想过尝试“媒体”属性！我会试一试，看看效果如何。 请注意横向尺寸是翻转的！横向图像的宽度为 748，而非 1024，高度为 1024。这意味着您的横向初始图像应顺时针旋转 90 度。【参考方案6】：显然启动画面只在以下情况下有效
1) 必须是设备所需的确切尺寸。 2) 应用程序启动时设备必须是纵向的。 3) 一些消息来源说仅 png，但 jpg 现在似乎可以使用。
【讨论】：
启动图像仅适用于纵向是正确的，不幸的是iOS 5仍然是这种情况。我真的希望他们能用iOS 5解决这个问题，但没有运气。 :-( 等一下，我做了更多的测试，这个错误实际上已经在 iOS 5 中修复了！现在，无论您将 iPad 放在哪个方向，从主屏幕第一次或第二次启动时都会显示启动图像。请记住 LINK 标签上的媒体查询！如果你不包括他们，你会遇到奇怪的行为。 要支持横向方向，您还需要为它们创建链接和图像。即：对于每个可能的设备分辨率，您有两个链接和两个图像......【参考方案7】：最完整、最核心的解决方案：https://gist.github.com/tfausak/2222823
【讨论】：
【参考方案8】：花了一些时间弄清楚如何为新 iPad (Retina) 制作启动画面，这是我为新 iPad (Retina) 的两个方向测试和工作的解决方案。
附：在发布此之前，我已经测试了已经给出的解决方案，但它们没有奏效。
<!-- iPad (Retina) (Portrait) -->
<link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
【讨论】：
【参考方案9】：这对某些人来说可能很明显，但启动图像对我不起作用，除非我添加了一个快捷方式到主屏幕，从那里运行它，并具有以下代码：
<meta name="apple-mobile-web-app-capable" content="yes" />
这个页面对于弄清楚这一切很有用：http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images
【讨论】：
【参考方案10】：我能够在 iPhone/iPad/iPhoneRetina 上为 WebApps 获得 4 个单独的启动图像的方式是结合了一些东西......
非视网膜 iPhone (320x460)：
<link rel="apple-touch-startup-image" href="startup-iphone.jpg" />
Retina iPhone (4 & 4S) (640x920)：使用上面发布的 Javascript 技术。 http://www.paulofierro.com/archives/568/
iPad（两个方向）很棘手。景观必须为 748w x 1024h，“底部”为左侧。肖像必须为 768w x 1004h，“底部”为底部。我必须通过 php 通过在用户代理中检测 iPad 来包含 iPad 标签，否则不会加载非视网膜 iPhone 启动图像。这是代码...
<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?>
<?php if ($isiPad) ?>
<link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<?php ?>
执行上述操作可以让我的 webapp（实际上是一个简单的 wordpress 博客网站，目前正在离线工作）拥有 iPhone、Retina 和两个 iPad 方向的启动图像。在运行最新 iOS 4 的 iPhone 3G、运行最新 iOS 5 的 iPad 和 iPhone 4 上进行了测试。
当然，您也可以通过 javascript 包含 iPad 代码。哈哈
【讨论】：
您好，感谢您指出纵向尺寸实际上是 768x1004。我使用 748x1024 的图像并没有工作。现在可以了。【参考方案11】：我已经测试了很多次，现在我确信当你这样做时它会起作用：首先以纵向方式握住你的pad，打开你的应用程序，然后以横向方式握住你的应用程序，打开你的应用程序。很烂，但是……似乎这是唯一的方法。你必须先按住你的平板肖像才能“解锁”这个错误。
【讨论】：
【参考方案12】：完整的元数据：
<!-- Icons -->
<!-- iOS 7 iPad (retina) -->
<link href="icon-152x152.png"
sizes="152x152"
rel="apple-touch-icon">
<!-- iOS 6 iPad (retina) -->
<link href="icon-144x144.png"
sizes="144x144"
rel="apple-touch-icon">
<!-- iOS 7 iPhone (retina) -->
<link href="icon-120x120.png"
sizes="120x120"
rel="apple-touch-icon">
<!-- iOS 6 iPhone (retina) -->
<link href="icon-114x114.png"
sizes="114x114"
rel="apple-touch-icon">
<!-- iOS 7 iPad -->
<link href="icon-76x76.png"
sizes="76x76"
rel="apple-touch-icon">
<!-- iOS 6 iPad -->
<link href="icon-72x72.png"
sizes="72x72"
rel="apple-touch-icon">
<!-- iOS 6 iPhone -->
<link href="icon-57x57.png"
sizes="57x57"
rel="apple-touch-icon">
<!-- Startup images -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPad (portrait) -->
<link href="startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPad (landscape) -->
<link href="startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPhone -->
<link href="startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
【讨论】：
【参考方案13】：iPhone 6 和 iPhone 6+
来自这个链接：http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers
【讨论】：
【参考方案14】：如果您想针对 Retina 显示器，我找到了一个解决方案并在此发布了博客：http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome
基本上，sizes 属性和媒体查询不起作用。加载页面后，您必须通过 JavaScript 注入高分辨率启动图像。哈克但有效。
【讨论】：
以上是关于iOS Web 应用程序（尤其是 iPad）的多个“apple-touch-startup-image”分辨率？的主要内容，如果未能解决你的问题，请参考以下文章
过渡到 iOS 7：在 iPad 上查看的 jQuery/iPhone Web 应用程序的正确视口设置