iOS8 WebApp启动画面黑

Question

我正在考虑为iOS8中的WebApp添加启动屏幕，但是我只是得到一个黑色矩形而不是启动图像。 我在网上发现的一个例子也遇到了同样的问题。 （如图所示这里 ）。我在iPad上航和iPhone 5S都尝试。 这是一个已知的错误，还是我做错了什么？

<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-320x460.png"media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">

Answer 1

我当时正在从事一个类似的项目：“构建WebApp”，同样经历了同样的头痛。

我有一台配备iOS 8.1.1的iPhone 5S，我刚刚成功测试了640px x 1096px图片的第三行。 我包括了您的整个代码段，它也起作用。 我也转到了您的示例页面，它也起作用。

不幸的是，我没有到源的链接，因为我只是在网上冲浪，但是我记得一个人在iPhone 3的电话线（您的第一行）上遇到了问题。不必出于特殊原因将其结尾。

这正是我在第3行进行测试的代码：

<link   rel="apple-touch-startup-image" 
        href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png"
        media="(device-width: 320px) and (device-height: 568px)
        and (-webkit-device-pixel-ratio: 2)"/>

我建议先使用此行进行测试，然后逐步添加其余部分。 希望它有助于在这里起作用:)

最后一个想法：如果使用清单文件，并且将启动映像保存在本地，则必须删除WebApp并再次保存到主屏幕以重新加载映像，或者还必须更新清单文件。 以防万一黑色矩形被保存（不确定是否曾经保存过）。

如果您有兴趣，这里是标题的元数据（请简短）：

<meta name="apple-mobile-web-app-title" content="Your WebApp Name" />