apple-touch-startup-image 加载错误的分辨率图像答案

【问题标题】：apple-touch-startup-image loading wrong resolution imageapple-touch-startup-image 加载错误的分辨率图像
【发布时间】：2011-09-19 22:33:42
【问题描述】：

我正在做一个 Sencha Touch 网络应用程序，其初始屏幕指定如下。图像分别为 640x920 和 320x460（允许状态栏并遵循 Sencha 的示例）。

<link rel="apple-touch-startup-image" media="screen and (resolution: 326dpi)" href="/resources/img/startup_640.png" />
<link rel="apple-touch-startup-image" media="screen and (resolution: 163dpi)" href="/resources/img/startup.png" />

但是，在 iPhone 4 上，我仍然只能看到低分辨率图像。（为方便起见，我在相应的图像中嵌入了文本“640x920”和“320x460”，以确保我看到的是正确的图像。）

我不断清除 Safari 缓存并重新加载应用程序，但继续加载错误的图像。

为了确保它们正确，我将链接切换为指向相反的文件，但正如预期的那样，没有加载任何启动画面。

还有其他建议吗？

编辑：同样，apple-touch-icon-precomposed 也在加载两者中较小的那个。

【问题讨论】：

标签： iphone sencha-touch resolution splash-screen

【解决方案1】：

缺乏文档确实令人沮丧。我找到了一个解决方案，并在这里写了博客：http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome

基本上，sizes 属性和媒体查询将不起作用。加载页面后，您必须通过 JavaScript 注入高分辨率启动图像。哈克但有效。

【讨论】：

【解决方案2】：

这将为您的 Web 应用程序添加一个启动画面。以下是 iPad 和 iPhone/iPod Touch 所需的尺寸，其中还包括状态栏区域。

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg"  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Portrait -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Landscape -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Portrait (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Landscape (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

如果创建与 iPad 兼容的 Web 应用，建议同时使用横向和纵向尺寸。

【讨论】：

我已经尝试了各种方法，但 iPad 2 无法识别 size 属性，模拟器也无法识别。
上面的代码来自我的网络应用程序......我没有任何问题。我会 100% 确定您的图像尺寸完全正确，并且您将上面的代码插入到文档的 <head> 中，就在您的元标记之后。我已经阅读了一些图像必须是 jpg 的地方，虽然我没有看到这个。

【解决方案3】：

目前看来，Apple 不支持 Retina 显示分辨率的启动图像。根据他们的docs...

在 iPhone 和 iPod touch 上，图像必须为 320 x 460 像素并且在纵向。

那篇文章中没有说明支持高分辨率启动图像。

关于这个问题的另一个很好的讨论可以找到here。

【讨论】：