我已经编写了一个基于HTML5的iOS Web应用程序，似乎一切运行良好，但我正在尝试用多个启动屏幕来完善它。 iPhone / iPod touch适用于320x460的PNG，如下所示：
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
我发现大量的文档说iPad的启动图像应该像iPhone / iPod touch一样，从高度上剃掉20px，以适应状态栏，分辨率为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的启动图像吗？
答案 0 :(得分：77)
适用于iPad和iPhone的启动图像和触摸图标的最终解决方案（风景||肖像）和（视网膜||不）：
<!-- 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" />
答案 1 :(得分：18)
我实际上让它在横向模式下工作。我在这里得到了信息：https://gist.github.com/472519。
问题是风景图像必须是748x1024（侧面的横向图像，我顺时针旋转）而不是1024x748。
我还必须首先以纵向模式启动应用程序然后横向启动。
答案 2 :(得分：18)
我只想提供实际有用的答案组合。我们发现选择的答案，没有使用飞溅图像的视网膜版本。 Pavel的答案修复了iPad的视网膜版本。以下内容已经在iPhone（Retina和非视网膜）和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" />
我不能相信这一点，但这种配置有效。只需复制和粘贴，确保图像的大小完全符合其名称。
答案 3 :(得分：13)
如果一个链接元素缺少媒体属性，则事情对我不起作用。代码在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（高分辨率），但最有可能它的工作方式相同。
答案 4 :(得分：3)
最完整，最基本的解决方案：https://gist.github.com/tfausak/2222823
答案 5 :(得分：3)
此答案为生成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希望每个分辨率一张图像。
如果初始屏幕丢失或不正确，将在加载时显示白色屏幕，这看起来不专业，并且会使（web）应用变慢。
在线有 apple-touch-startup-image生成器 ，但是它们要么被破坏，要么完全忽略了Landscape，它们的命名约定也不是那么好。这样比较容易。
在包含logo.png文件的目录中以bash格式运行以下命令，并且它将生成Safari期望的20张图像（纵向和横向每个分辨率均为十种分辨率）：< / p>
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)">
（就我个人而言，我将评论保留在Twig注释栏中，这样我就可以保留信息而不会过多地污染客户的文本。）
我在网上看到的一些示例使用了min-device-*，但是在这种情况下，鉴于Safari期望图片的尺寸（接近）是完全没有意义的。
我看到的其他一些示例使用了较短的图像（较短的像素为40或60px，即没有状态栏）。较早版本的iOS似乎期望达到这种尺寸，但情况不再如此。
我有96％的iOS用户使用iOS 12.x，因此，庆幸的是，您无需过多关注较旧的iOS版本。但是，如果我错过了一些事情，请告诉我。
在Android像个大男孩一样乐意将应用程序的图标显示在启动屏幕中的情况下，iOS和Safari迫使我们完成了所有这些额外工作。 20张图像显示一个简单的启动画面！这太疯狂了！事情将来可能会变得更好，但是现在就是这样。
此基本任务需要大量的编码和测试。希望对您有所帮助。
我将尝试 使用更新的分辨率对此内容进行更新 。如果您找不到评论，请发表评论。
答案 6 :(得分：2)
显然启动屏幕仅在以下条件下工作
1）必须是设备所需的确切尺寸。 2）启动应用程序时，设备必须处于纵向方向。 3）有些消息来源只说png，但jpg现在似乎有效。
答案 7 :(得分：2)
花了一些时间搞清楚如何为新iPad（Retina）制作闪屏，这是我测试和工作的解决方案，适用于新iPad（Retina）的方向。
P.S。在发布之前我已经测试了已经给出的解决方案而且它们没有用。
<!-- 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" />
答案 8 :(得分：2)
这对某些人来说可能是显而易见的，但启动图像对我来说不起作用，除非我添加了我添加了主屏幕的快捷方式，从那里运行它，并有以下代码：
<meta name="apple-mobile-web-app-capable" content="yes" />
此页面对于解决这个问题非常有用：http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images
答案 9 :(得分：1)
我能够在iPhone / iPad / iPhoneRetina上为WebApps获取4个单独的启动图像的方式是一些事情的组合......
非Retina iPhone（320x460）：
<link rel="apple-touch-startup-image" href="startup-iphone.jpg" />
Retina iPhone（4＆amp; 4S）（640x920）：使用上面发布的Javascript技术。 http://www.paulofierro.com/archives/568/
iPad（两种方向）都很棘手。景观必须为748w×1024h，“底部”为左侧。纵向必须为768w x 1004h，“底部”为底部。我必须通过检测用户代理中的iPad来通过PHP包含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方向的启动图像。在iPhone 3G上运行测试，运行最新的iOS 4，iPad和iPhone 4都运行最新的iOS 5。
当然你也可以通过javascript包含iPad代码。洛尔
答案 10 :(得分：1)
我已经测试了很多次，现在我肯定当你这样做时它会起作用：首先以纵向方式握住你的垫，打开你的应用程序，然后以横向方式抓住你的应用程序，打开你的应用程序。糟透了但......似乎这是唯一的方法。你必须先拿着你的垫子肖像来“解锁”这个bug。
答案 11 :(得分：1)
完整元：
<!-- 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">
答案 12 :(得分：1)
iPhone 6和iPhone 6+
<link href="launch6.png" media="(device-width: 375px)" rel="apple-touch-startup-image"> <link href="launch6plus.png" media="(device-width: 414px)" rel="apple-touch-startup-image">
从此链接：http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers
答案 13 :(得分：1)
应该添加10.2英寸iPad ...
// Device Portrait size Landscape size Screen size Ratio
// 10.2" iPad 1620px × 2160px 2160px x 1620px 810px × 1080px 2
答案 14 :(得分：0)
如果你想定位视网膜显示屏，我找到了一个解决方案，并在此处发表了博文：http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome
基本上，尺寸属性和媒体查询不起作用。一旦页面加载，您必须通过JavaScript注入高分辨率启动映像。 Hacky但是很有效。