多个“apple-touch-startup-image”适用于iOS网络应用的解决方案（尤其适用于iPad）？ [英] Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?

问题描述

我已经编写了一个基于HTML5的iOS网络应用程序，似乎一切运行良好，但我正在尝试用多个启动屏幕来完善它。 iPhone / iPod touch适用于320x460的PNG，如下所示：

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:

<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太窄）。

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).

我尝试了以下（基于 apple-touch-icon 链接的功能的疯狂猜测），但无济于事：

I've tried the following (a wild guess based on the functionality of the apple-touch-icon links), to no avail:

<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" />

如果是最后一个链接元素列出。如果1024x748分辨率图像是最后一个，则会呈现灰色背景（但不会是768x1004）。所以，显然 apple-touch-startup-image 链接不支持尺寸属性。

Only the 768x1004 resolution image works if it's the last link element 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-image link doesn't support the sizes attribute.

这是否在较新版本的iOS中受支持？有没有办法支持多个启动图像？我应该创建1024x768启动映像吗？如果是这样，iPhone / iPod touch的缩小比例是多少？或者，我是否应该放弃并且没有iPad的启动图像？

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?

推荐答案

启动的明确解决方案 - 用于iPad和iPhone的图像和触摸图标（风景||肖像）和（视网膜||不）：

definitive solution for startup-image and touch-icons for iPad and iPhone (landscape || portrait) and (retina || not):

        <!-- 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" />

这篇关于多个“apple-touch-startup-image”适用于iOS网络应用的解决方案（尤其适用于iPad）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！