Web 应用程序中用于 Retina 显示的启动图像？

Question

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

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

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

Answer 2

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

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

Answer 3

iPad：

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

Answer 4

我见过 XCode 在这种情况下出错的情况。除了仔细检查图像大小 (320x460) 之外，还可以：

1. 确保两个图像都在构建中。 （右键/选项单击文件标题并选择“目标成员身份”，然后确保选中该复选框。）
2. 执行全新构建。
3. 删除构建目录中的所有构建文件。 （Clean 并不能获取所有这些内容。）
4. 从目标手机/SIM 卡中删除应用程序。

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

Answer 5

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

你想要两个文件。 Default.png 和[电子邮件受保护]。第一个应该是 320x460。第二个应该是 640x920。我保证它有效。