适用于网络应用的iPhone 4 Retina“apple-touch-startup-image”

Question

这里已被多次询问，但没有一个可靠且可理解的答案。 这是一个网络应用程序 ，而不是本机应用程序。

我正在使用：

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

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

甚至可能[还]？

Answer 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 App，建议使用横向和纵向尺寸。

Answer 2

文档（在此处找到）说：

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

我测试过提供不同尺寸，但如果尺寸不完全是320x460，则图像被忽略。 Apple没有明确声明是否有可能包含高分辨率启动图像，但论坛帖子（例如： Apple Dev Forum ）表明目前无法实现。

Answer 3

刚做了测试......苹果已经添加了“尺寸”属性。 所以，对于高分辨率，你添加sizes =“640x920”等。我想这也适用于不同的方向。

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

Answer 5

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

• 设备（iPhone或iPad）
• 决议（视网膜与否）
• 方向（肖像或风景）

我对吗？