如何为iPhone5设置apple-touch-startup-image？

Question

我尝试过

<link href="Images/[e-mail]" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">

但是它没有起作用。而且苹果的界面指南还没有更新到iPhone5。

有人知道吗？谢谢！

- OpenThread

Answer 1

1.不要使用"width=device-width"来设置视口宽度，使用以下代码:

<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">

2. 准备一张大小为640*1096的图像，保存为"Images/Default-568h@2x"，并将以下代码添加到页面的头部:

<link href="Images/[e-mail]" rel="apple-touch-startup-image" sizes="640x1096">

这是一个演示，它兼容iPhone5： https://github.com/openfibers/php-tot

- OpenThread

---

sizes 属性在 <link> 元素上真正起作用了吗？我认为你必须使用媒体查询。我的解决方案 使用媒体查询，并在所有 iOS 设备上都能工作。 - Taylor Fausak

sizes属性确实有效。只需查看演示并在4英寸模拟器或iPhone5上运行它，它就会告诉您。 - OpenThread

你的演示确实能够工作，但是 sizes 与其无关。iPhone 5正在加载最后一个针对它使用媒体查询的 <link>。如果您将 [e-mail] 列在 [e-mail] 上面，它将无法正常工作。重点是，您已经使用了 sizes="320x640" 而不是 sizes="320x460"。 - Taylor Fausak

任何关于 iPhone5 媒体查询的提示都将不胜感激。 - OpenThread

我之前链接的博客文章（iPhone 5 Web App Startup Image）解释了匹配 iPhone 5 的媒体查询。为了记录：(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)。 - Taylor Fausak

@OpenThread，我有一个关于它的问题...我尝试了你上面的答案，在我的Web应用程序在iPhone 5下运行时可以正常工作...但是当我尝试在iPhone 4上运行时就不起作用了...我该如何设置两个设备的启动图像呢？例如：当在iPhone 5上运行Web应用程序时，显示imageforiphone5.jpg，然后当在iPhone 4上运行时，运行imageforiphone4.jpg...有什么想法吗？谢谢。 - mans

Answer 2

启动图与留白之间没有直接关系。

解决方法是将视口宽度更改为非设备宽度或320。为什么？我不知道，这很奇怪，但如果您只使用下一个视口，您就不会得到留白。

<meta name="viewport" content="width=320.1">

apple-touch-startup-image的sizes属性被忽略了，所以如果您想提供多个尺寸，请使用媒体查询。

另一个解决方案是当iPhone/iPod达到4英寸时，使用JavaScript更新视口。

有关该解决方案和发现的更多信息，请访问http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers#updatewebapps。

- Max Firtman

Answer 3

这方面有官方的参考资料...(即使是iPhone 5)

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

- HotFrog

---

这个参考资料与我的问题无关，因为我正在制作Web应用程序。 - OpenThread