多个“apple-touch-startup-image"iOS 网络应用程序(尤其是 iPad)的分辨率? [英] Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?

问题描述

我已经编写了一个基于 HTML5 的 iOS Web 应用程序，并且一切似乎都运行良好，但我正在尝试使用多个启动屏幕来完善它.iPhone/iPod touch 在 PNG 为 320x460 的情况下运行良好，如下所示:

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(纵向)分辨率有效(但不正确——横向模式下 20 像素太窄).

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

只有 768x1004 分辨率的图像是列出的最后一个 link 元素时才有效.如果最后是 1024x748 分辨率的图像，则会呈现灰色背景代替它(但绝不会是 768x1004).所以，显然 apple-touch-startup-image link 不支持 sizes 属性.

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?

推荐答案

startup-image 和 touch-icons 的最终解决方案，适用于 iPad 和 iPhone(横向 || 纵向)) 和 (retina || not):

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屋！