Question

我正在考虑在iOS8中为WebApp添加启动画面，但是我只是得到一个黑色矩形而不是启动图像。我在网上找到的一个例子也遇到了同样的问题。（如here所示。）我在iPad Air和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" />

iOS8 WebApp Splash Screen Black

1 个答案: