iOS8 WebApp Splash Screen Black

Question

Я ищу добавление всплывающего экрана для WebApp в iOS8, однако я просто получаю черный прямоугольник вместо изображения всплеска. Пример, который я нашел в Интернете, страдает от одной и той же проблемы. (Как видно, 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» и пережил те же головные боли.

У меня есть iPhone 5S с iOS 8.1.1, и я просто проверил вашу третью строку с изображением 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" />