用于 Retina 显示的 webapp 中的启动图像？答案

【问题标题】：Startup image in webapp for Retina display?用于 Retina 显示的 webapp 中的启动图像？
【发布时间】：2011-04-12 01:45:04
【问题描述】：

有人知道如何让iOS在使用时显示更高分辨率的启动图像吗？目前我被 460x380 图像卡住了，当它显示在 iPhone 4 的高 dpi 显示器上时，它显然看起来很糟糕。我尝试了@2x 技巧，但似乎没有用。

有什么想法或解决方法吗？

【问题讨论】：

如何显示启动图像？你在使用 default.png 文件吗？
如果你在bit.ly/95IHsf查看Apple的文档，他们说图片必须是320 x 460像素并且是纵向的。我注意到我搞砸了问题中的分辨率，但我用 320x460 完成了它并让它工作。文档没有说明视网膜显示，所以我不确定它是否过时，因此我提出了问题。
Satyam svv，我正在使用 startup.png，我尝试将高分辨率版本设置为 startup@2x.png，但没有成功。我正在使用链接 rel="apple-touch-startup-image" 标签。
Crispy - 只是检查您是否找到了这个问题的答案（最后的评论/答案是将近一年前）。 Apple 的文档仍然声明图像必须是 320x460...

标签： iphone ios4 mobile-safari

【解决方案1】：

我从来没有想过我会得到这个工作，但出于某种原因，网上到处都说高分辨率图像尺寸是 640x960，实际上是 640x920。进行此更改后，高分辨率初始屏幕将正确显示在视网膜显示器上。下面是我在我们的应用程序中使用的确切代码。我们在 iPad1/iPad2 纵向和横向、iPhone3/iPhone4 上有启动画面

希望这对某人有所帮助。

  <!-- iOS Device Startup Images -->
<!-- iPhone/iPod Touch Portrait – 320 x 460 (standard resolution) -->
<link rel="apple-touch-startup-image" href="splash-screen-320x460.png" media="screen and (max-device-width: 320px)" />

<!-- iPhone/iPod Touch Portrait – 640 x 920 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="splash-screen-640x920.png" />

<!-- For iPad Landscape 1024x748 -->
  <!-- Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" sizes="1024x748" href="splash-screen-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- For iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="splash-screen-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"/>

【讨论】：

【解决方案2】：

您是否尝试过在link 标签上使用与像素比相关的媒体查询？

media="only screen and (-webkit-min-device-pixel-ratio: 2)" 用于视网膜显示器。

【讨论】：

这是一个聪明的主意，但即使没有媒体属性，640x920 的图像也无法在视网膜显示器上工作。我认为现在可能不支持它。至少离子我的测试，我还没有管理它。请参阅documentation。希望他们会在以后的 iOS 版本中添加它。
太糟糕了，现在才开始为我的应用设置开始屏幕，它看起来很粗糙。

【解决方案3】：

iPad：

link rel="apple-touch-startup-image" sizes="768x1004" href="" /
iPhone Retina Display: link rel="apple-touch-startup-image" sizes="640x960" href="" /

【讨论】：

【解决方案4】：

我见过在这种情况下 XCode 出现问题的案例。除了仔细检查图像尺寸 (320x460) 之外，还可以：

确保两个映像都在构建中。（右键/选项单击文件标题并选择“目标成员资格”，然后确保选中该复选框。）
进行干净的构建。
删除构建目录中的所有构建文件。（清洁不会得到所有这些。）
从目标手机/sim 中删除应用。

我知道这可能看起来很明显或不必要，但我遇到了同样的问题，并且清理/删除/删除序列修复了它。

【讨论】：

他说的是网络应用，而不是原生应用。

【解决方案5】：

“@2x”技巧有效。你的图片一定有问题。

您需要两个文件。 Default.png 和 Default@2x.png。第一个应该是 320x460。第二个应该是 640x920。我保证它有效。

【讨论】：

不..由于某种原因不起作用。现在我有 Default.png 和 Default@2x.png 并且我已经验证了两者的大小。它总是加载 Default.png。我从我的开发服务器的日志中验证了这一点，它甚至没有发送@2x 版本的请求。我一定是在这里遗漏了一些东西... edit 您说的是 webapp 的启动/启动图像，而不是网页上的平均 img 标签图像，对吗？ :)
我说的是 NATIVE 应用程序的启动画面。这就是你要问的吗？我看到您在问题的标题中使用了“webapp”一词，但是您编写的其他所有内容都好像您正在制作本机应用程序...@2x 是针对本机应用程序的。在 Obj-C 中，使用 Xcode 构建。
啊，我说的是您通过 Mobile Safari 使用的 webapp。我的印象是，在 iOS4 Mobile Safari 中也会尝试检查 @2x 图像。