如何为 iphone5 设置 apple-touch-startup-image？答案

【问题标题】：how to set apple-touch-startup-image for iphone5?如何为 iphone5 设置 apple-touch-startup-image？
【发布时间】：2012-09-09 08:54:29
【问题描述】：

我试过了

<link href="Images/Default-568h@2x.png" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">

但它没有用。并且苹果的界面公会还没有为iphone5更新。

有人知道吗？谢谢！

【问题讨论】：

【解决方案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/Default-568h@2x.png" rel="apple-touch-startup-image" sizes="640x1096">

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

【讨论】：

sizes 属性是否真的适用于<link> 元素？我以为你必须使用媒体查询。 My solution 使用媒体查询并适用于所有 iOS 设备。
sizes 属性确实有效。只需查看演示并在 4 英寸模拟器或 iPhone5 上运行它，它就会告诉您
您的演示确实有效，但sizes 与它无关。 iPhone 5 正在通过媒体查询加载最后一个针对它的<link>。如果您在Default@2x.png 上方列出了Default-568h@2x.png，它将无法正常工作。举个例子，你有 sizes="320x640" 而不是 sizes="320x460"。
任何关于 iPhone5 媒体查询的提示将不胜感激
我之前链接的博文 (iPhone 5 Web App Startup Image) 解释了匹配 iPhone 5 的媒体查询。后人：(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)。

【解决方案2】：

启动图像与信箱没有直接关系。

解决方案是将视口更改为与设备宽度或 320 不同的宽度。为什么？我不知道，这真的很奇怪，但如果你只使用下一个视口，你就不会得到信箱。

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

apple-touch-startup-image 上的 sizes 属性被忽略，因此如果您想提供多个，则需要使用媒体查询。 p>

其他解决方案是在 iPhone/iPod 4" 时使用 JavaScript 更新视口。

【讨论】：

【解决方案3】：

对此有官方参考... （即使是 iPhone 5）

【讨论】：