iOS 网络应用程序（尤其是 iPad）的多个“apple-touch-startup-image”分辨率？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4687698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
提问by morgant
I've written an HTML5-based iOS web application and all seems to be working well, but I'm trying to polish it up with multiple startup screens. The iPhone/iPod touch works well w/a PNG of 320x460, as follows:
我已经编写了一个基于 HTML5 的 iOS Web 应用程序，并且一切似乎都运行良好，但我正在尝试使用多个启动屏幕来完善它。iPhone/iPod touch 在 PNG 为 320x460 的情况下运行良好，如下所示：
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
I found plenty of documentation that says the startup images for the iPad should, like the iPhone/iPod touch, have the 20px shaved from the height to accommodate for the status bar giving resolutions of 768x1004 (portrait) or 1024x748 (landscape). However, in my testing (currently w/an iPad running iOS 3.2.2), only the 768x1004 (portrait) resolution works (but is incorrect—20px too narrow—when in landscape mode).
我发现很多文档都说 iPad 的启动图像应该像 iPhone/iPod touch 一样，从高度上剃掉 20 像素，以适应状态栏提供 768x1004（纵向）或 1024x748（横向）的分辨率。但是，在我的测试中（目前使用 iPad 运行 iOS 3.2.2），只有 768x1004（纵向）分辨率有效（但不正确——横向模式下 20 像素太窄）。
I've tried the following (a wild guess based on the functionality of the apple-touch-iconlinks), to no avail:
我尝试了以下（基于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" />
Only the 768x1004 resolution image works if it's the last linkelement listed. If the 1024x748 resolution image is last, a gray background is rendered in its stead (but never the 768x1004). So, obviously the apple-touch-startup-imagelinkdoesn't support the sizesattribute.
如果它是link列出的最后一个元素，则只有 768x1004 分辨率的图像才有效。如果最后是 1024x748 分辨率的图像，则会呈现灰色背景（但不会呈现 768x1004）。所以，显然apple-touch-startup-imagelink不支持该sizes属性。
Is this supported in newer versions of the iOS? Is there any way to support multiple startup images? Should I create a 1024x768 startup image? If so, will is be scaled down for the iPhone/iPod touch? Or, should I just give up and not have a startup image for the iPad?
较新版本的 iOS 是否支持此功能？有没有办法支持多个启动图像？我应该创建一个 1024x768 的启动映像吗？如果是这样，iPhone/iPod touch 会按比例缩小吗？或者，我应该放弃并且没有 iPad 的启动图像吗？
回答by Marco Allori
definitive solution for startup-imageand touch-iconsfor iPad and iPhone (landscape || portrait) and (retina || not):
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" />
回答by derickito
I actually got it to work on landscape mode. I got the info here: https://gist.github.com/472519.
我实际上让它在横向模式下工作。我在这里得到了信息：https: //gist.github.com/472519。
The issue is the landscape image has to be 748x1024 (A landscape image sideways, I rotated clockwise) instead of 1024x748.
问题是风景图像必须是 748x1024（横向图像，我顺时针旋转）而不是 1024x748。
I also had to launch the app in portrait mode first and then landscape.
我还必须先以纵向模式启动应用程序，然后以横向模式启动。
回答by Chris
I just wanted to offer a combination of answers that actually worked. We found with the answer that was selected, the retina versions of the splash images were not being used. Pavel's answer fixed the retina version for the iPad. The following has been tested on iPhone (Retina and non-retina) and iPad (retina and non-retina).
我只是想提供实际有效的答案组合。我们发现在选择的答案中，没有使用初始图像的视网膜版本。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" />
I can't take credit for any of this, but this configuration works. Just copy and paste, make sure to make the images exactly the size dictated in their names.
我不能相信任何这些，但这种配置有效。只需复制和粘贴，确保图像的大小与名称中指定的大小完全相同。
回答by Cagey
If one link elements was missing a media property things didn't work for me. The code successfully displayed a launch image on an iPhone 3G and iPad (portrait and landscape mode) .
如果一个链接元素缺少媒体属性，那么事情对我不起作用。该代码在 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)" />
Couldn't give it a try for the iPhone4 (high res) but most probably it works the same way.
无法尝试 iPhone4（高分辨率），但很可能它的工作方式相同。
回答by Fabien Snauwaert
This answer gives a convenient way to generate all 20 splash screens currently required by iOS+ up-to-date HTML markup for iOS 12.1.
这个答案提供了一种方便的方法来生成 iOS 当前所需的所有 20 个初始屏幕+ 适用于iOS 12.1的最新 HTML 标记。
This includes solutions for iPhone XR, iPhone XS Max and 11" iPad Pro
这包括适用于 iPhone XR、iPhone XS Max 和 11" iPad Pro 的解决方案
Context
语境
Safari on iOS now supports Progressive Web Apps, but implements it differently from Chrome. It does read the manifestfile, but it ignores the icons declared in it.
iOS 上的 Safari 现在支持 Progressive Web Apps，但实现方式与 Chrome 不同。它确实读取了manifest文件，但忽略了其中声明的图标。
Instead, Safari expects a list of apple-touch-startup-imagetags. While the official Apple docslist this example:
相反，Safari 需要一个apple-touch-startup-image标签列表。虽然官方 Apple 文档列出了这个例子：
<link rel="apple-touch-startup-image" href="/launch.png">
…it is misleading, because (at least as of iOS 12.1), oneimage is not enough and will not work. Instead, Safari expects one image per resolution.
...这是一种误导，因为（至少从 iOS 12.1 开始），一张图片是不够的，而且不会工作。相反，Safari 期望每个分辨率有一个图像。
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.
如果启动画面丢失或不正确，加载时将显示白屏，这看起来不专业，并且使（网络）应用程序感觉缓慢。
Generating the splash screens
生成启动画面
There are apple-touch-startup-image generatorsonline but they're either broken or ignore Landscape altogether, and their naming conventions are not all that nice. This is easier.
网上有apple-touch-startup-image 生成器，但它们要么坏了，要么完全忽略了 Landscape，而且它们的命名约定也不是那么好。这更容易。
Run the following command in bash in a directory containing a logo.pngfile and it will produce the 20 images expected by Safari(ten resolutions, for each of Portrait and Landscape):
在包含logo.png文件的目录中的 bash 中运行以下命令，它将生成 Safari 期望的 20 个图像（十个分辨率，分别用于纵向和横向）：
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
This relies on GraphicsMagick, a better alternative to ImageMagick. (On macOS, with brew, it's as easy to install as brew install graphicsmagick.
这依赖于GraphicsMagick，它是 ImageMagick 的更好替代品。（在 macOS 上，使用 brew，安装就像brew install graphicsmagick.
Markup
标记
Here is the HTML markup for all 20 files:
这是所有 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)">
(Personally, I keep the comments in a Twig comment block so I get to keep the info without polluting the client's with too much text.)
（就我个人而言，我将评论保留在 Twig 评论块中，这样我就可以保留信息而不会用过多的文本污染客户的信息。）
Some examples I saw online used min-device-*, but this makes little sense in this context given Safari expects pictures in (near-)exact dimensions.
我在网上看到的一些例子使用了min-device-*，但在这种情况下这没有意义，因为 Safari 需要（接近）精确尺寸的图片。
Some other examples I saw used shorter images (40 or 60px shorter, i.e. without the status bar). Older versions of iOS seem to have expected such dimensions, but this is no longer the case.
我看到的其他一些示例使用了更短的图像（更短 40 或 60 像素，即没有状态栏）。旧版本的 iOS 似乎已经预料到了这样的尺寸，但现在已经不是这样了。
Parting thoughts
离别思绪
96% of my iOS users use iOS 12.x, so thankfully no need to care too much about older iOS versions. But if I missed something please let me know.
我的 iOS 用户中有 96% 使用 iOS 12.x，所以谢天谢地，无需太在意较旧的 iOS 版本。但如果我错过了什么，请告诉我。
Where Android, like a big boy, is happy showing the app's icon as part of the splash screen, iOS and Safari force us through all this extra work. 20 images to show a simple splash screen! This is crazy! Things mightget better in the future, but that's how it is for now.
Android 就像一个大男孩一样，乐于将应用程序的图标显示为启动画面的一部分，而 iOS 和 Safari 则迫使我们完成所有这些额外的工作。20 张图像显示一个简单的启动画面！这太疯狂了！将来情况可能会好转，但现在就是这样。
This elementary task took a lot of coding and testing. I hope it'll help someone.
这项基本任务需要大量的编码和测试。我希望它会帮助某人。
I'll try to keep this updated with newer resolutions. Please post a comment if you see one is missing.
我会尽量用更新的分辨率来更新。如果您发现缺少一个，请发表评论。
回答by MPaulo
The most complete, gist solution: https://gist.github.com/tfausak/2222823
最全、gist的解决方案：https: //gist.github.com/tfausak/2222823
回答by Hamilton Meyer
Apparently the startup screen only works under the following conditions
显然，启动屏幕仅在以下条件下工作
1) must be the exact size required by the device. 2) the device must be in portrait orientation when the app is launched. 3) some sources say png only but jpg seems to work now.
1) 必须是设备要求的确切尺寸。2) 应用程序启动时，设备必须处于纵向。3) 一些消息来源说只有 png 但 jpg 现在似乎可以工作。
回答by Pavel Kostenko
Spent some time figuring out how to make splash screen for the new iPad (Retina), here is my tested and working solution for both orientation of the new iPad (Retina).
花了一些时间弄清楚如何为新 iPad (Retina) 制作启动画面，这是我针对新 iPad (Retina) 的两个方向经过测试和工作的解决方案。
P.S. before posting this I've tested already given solutions and they didn't worked.
PS 在发布这个之前我已经测试过已经给出的解决方案，但它们没有用。
<!-- 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" />
回答by muzzamo
This may be obvious to some but the startup image would not work for me unless I added I added a shortcut to the home screen, ran it from there, and had the following code:
这对某些人来说可能很明显，但启动图像对我不起作用，除非我添加了一个快捷方式到主屏幕，从那里运行它，并有以下代码：
<meta name="apple-mobile-web-app-capable" content="yes" />
This page was useful for figuring this all out: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images
这个页面对于弄清楚这一切很有用：http: //lineandpixel.com/blog/ios-web-app-icons-and-startup-images
回答by Giovanni Brescia
Complete meta:
完整元：
<!-- 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">
