我已经编写了一个基于 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（纵向）分辨率有效（但在横向模式下不正确 — 20 像素太窄）。
我已经尝试过以下操作（根据功能进行的疯狂猜测）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" />
如果是最后一张，则只有 768x1004 分辨率的图像才有效link列出的元素。如果最后是 1024x748 分辨率的图像，则会渲染灰色背景（但绝不会是 768x1004）。所以，显然apple-touch-startup-image link不支持sizes属性。
较新版本的 iOS 是否支持此功能？有什么办法可以支持多个启动图像吗？我应该创建 1024x768 的启动图像吗？如果是这样，iPhone/iPod touch 的尺寸会缩小吗？或者，我应该放弃并且没有 iPad 的启动图像吗？
最终解决方案启动图像 and 触摸图标对于 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" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
