用于 Web 应用的 iPhone 4 Retina "apple-touch-startup-image"答案

【问题标题】：iPhone 4 Retina "apple-touch-startup-image" for Web-apps用于 Web 应用的 iPhone 4 Retina "apple-touch-startup-image"
【发布时间】：2011-04-17 06:46:49
【问题描述】：

这个问题在这里被问过很多次，但没有一个可靠和可以理解的答案。这是一个网络应用，而不是原生应用。

我正在使用：

<link rel="apple-touch-startup-image" href="images/startup.png" />

显示启动图像。如果图像的分辨率为 320x460，它可以正常加载。我尝试使用 640x920 的视网膜分辨率（状态栏取出 40 像素），但没有成功。我试过@2x的东西，也失败了。

这甚至可能[还]？

【问题讨论】：

我发现这是一个答案，明天我会测试。 stackoverflow.com/questions/3707509/…
我是在该线程中发布答案的人，我们确定这不是答案——我以为他问的是本机应用程序，而不是网络应用程序。 @2x 适用于本机应用程序。我没有适合您的网络应用解决方案。

标签： iphone web-applications mobile-safari iphone-4 retina-display

【解决方案1】：

这将为您的 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 应用，建议同时使用横向和纵向尺寸。

【讨论】：

我不认为上述方法适用于视网膜启动图像，我刚刚尝试过。此外，您的启动图像尺寸错误 - 它们分别为 320x460 和 640x920
以上尺寸是正确的，代码在我开发的所有移动应用中都能完美运行。
是的，您的尺寸现已更正。我将此标签用于视网膜。上面的似乎在非视网膜启动屏幕上引起了冲突：S
Retina iPad 非常适合我。

【解决方案2】：

文档（找到here）说：

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

我已经测试过提供不同的尺寸，但如果尺寸不完全是 320x460，图像就会被忽略。苹果没有明确声明是否可以包含高分辨率启动图像，但论坛帖子（例如这里：Apple Dev Forum）表明目前是不可能的。

【讨论】：

不，上面写着320 x 480。
你是对的。我认为这在 iOS 7 中有所改变，因为它现在有一个半透明的状态栏。可能的答案可能已经过时，但我将其留作参考。

【解决方案3】：

刚刚进行了测试...苹果添加了“尺寸”属性。因此，对于高分辨率，您添加 size="640x920" 等。我想这也适用于不同的方向。

【讨论】：

更多信息，我找到了这篇文章（有趣的部分在文末）webdesignne.ws/2011/04/11/…
尚未测试方向，但尺寸 attr（用于 Retina）仅适用于 iOS5。

【解决方案4】：

这对我有用：

<link rel="apple-touch-startup-image" media="screen and (max-device-width: 320px)" href="images/iphone_splash.png"/>
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone_splash_hires.png" />

【讨论】：

【解决方案5】：

所以如果我理解得很好，考虑到我们需要考虑 3 个参数，我们实际上需要 8 个不同的图像：

设备（iPhone 或 iPad）
分辨率（视网膜与否）
方向（纵向或横向）

我说的对吗？

【讨论】：

你实际上只需要 7 个。见我上面的回答。