Question

我正在使用如下指定的初始屏幕进行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也会加载两者中的较小者。

Answer 1

这将为您的Web App添加启动画面。以下是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应用程序，建议使用横向和纵向尺寸。

Answer 2

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

基本上，尺寸属性和媒体查询不起作用。一旦页面加载，您必须通过JavaScript注入高分辨率启动映像。 Hacky但是很有效。

Answer 3

在这个时间点，Apple似乎不支持视网膜显示分辨率启动图像。根据他们的docs ...

在iPhone和iPod touch上，图像必须为320 x 460像素才能显示纵向。

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

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

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

3 个答案: