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