iPhone 4 Retina "apple-touch-startup-image" 适用于 Web 应用程序

Question

iPhone 4 Retina "apple-touch-startup-image" 适用于 Web 应用程序

iphoneweb-applicationsmobile-safariiphone-4retina-display

20

这个问题在这里被反复提出，但没有一个坚实易懂的答案。这是一个Web应用程序，而不是本地应用程序。

我正在使用：

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

如何显示启动图像。如果图像的分辨率为320x460，则可以正常加载。我尝试使用视网膜的分辨率，即640x920（状态栏占用了40px），但失败了。我已经尝试过 @2x 的方法，但也失败了。

这种情况是否可能[目前]实现？

- a79ce734e1

我找到了这个答案，我明天会测试。 https://dev59.com/2XA65IYBdhLWcg3wqASt - Savageman

我是在那个帖子中发布答案的人，我们确定这不是答案 - 我认为他是在问本地应用程序，而不是Web应用程序。@2x 的东西是针对本地应用的。我没有关于 Web 应用的解决方案。 - Dan Ray

5个回答

6

文档（可在此处找到：链接）中提到：

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

我已经测试了不同的大小，但如果大小不是恰好320x460，则图像将被忽略。苹果公司没有明确说明是否可以包含高分辨率启动图像，但论坛帖子（例如这里：Apple Dev Forum）表明目前不可能。

- Jakob Egger

不是，它说的是“320 x 480”。 - Onur Yıldırım

你说得对。我猜这个问题在iOS 7之后就改变了，因为现在它有一个半透明的状态栏。我的答案可能已经过时了，但我还是留下来供参考。 - Jakob Egger

5

我刚完成了测试...苹果公司已经添加了"大小"属性。因此，对于高分辨率，您可以添加sizes="640x920"等。我想这也适用于不同的方向。

- dikai

1

更多信息，请参考此文章（有趣的部分在文章末尾）http://www.webdesignne.ws/2011/04/11/5-meta-tags-for-making-your-website-an-ios-web-app/ - Jakob Egger

我还没有测试方向，但是在iOS5上，Retina的尺寸属性对我来说很有效。 - David Kaneda

0

这对我有效：

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

- Robot Woods

0

如果我理解正确的话，考虑到我们有3个参数，实际上需要8张不同的图片：

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

我的理解是正确的吗？

- Vinch

你实际上只需要7。请参考我上面的回答。 - adamdehaven

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adamdehaven · Accepted Answer

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