iOS / iPhone：Web应用程序启动画面不显示

I have the following code in the <head> of my web app, but I'm just getting a white screen on my iPhone 3GS while the DOM loads instead of the splash screen.

我在我的网络应用程序的中有以下代码，但是我只是在我的iPhone 3GS上获得白屏，而DOM加载而不是启动画面。

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!--STYLES-->

<!--SCRIPTS-->

<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image">

How can I get my splash screen to display correctly on all versions of the iPhone? Code not shown, but my web app icons are working when added to the homepage. I'm using jQuery Mobile to build this web app.

如何让我的启动画面在所有版本的iPhone上正确显示？代码未显示，但我的网络应用程序图标在添加到主页时正在运行。我正在使用jQuery Mobile来构建这个Web应用程序。

I have also confirmed that the PNG images are exactly the correct sizes and I have deleted the web app icon, refreshed, and re-added to the homescreen multiple times. None of the solutions I've found on * have worked for me. I have not tried the JavaScript solutions, because I'm sure there is a pure CSS solution.

我还确认PNG图像的大小正确，我删除了Web应用程序图标，刷新并重新添加到主屏幕多次。我在*上找到的解决方案都没有为我工作。我没有尝试过JavaScript解决方案，因为我确信有一个纯CSS解决方案。

2 个解决方案

#1

The sizes attribute works for apple-touch-icons but it doesn't work for apple-touch-startup-images. The only way to target the startup images is with media queries. Adam's answer is good but relies on the <link>s being in a particular order since the media queries are under-specified. Here are the fully-qualified media queries:

sizes属性适用于apple-touch-icons，但它不适用于apple-touch-startup-images。定位启动映像的唯一方法是使用媒体查询。 Adam的答案很好，但依赖于以特定的顺序排列，因为媒体查询不明确。以下是完全合格的媒体查询：

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

Also note that certain viewports will cause your web app to be letterboxed on the iPhone 5:

另请注意，某些视口会导致您的网络应用在iPhone 5上设置为信箱：

<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
      content="width=device-width">
<meta name="viewport"
      content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
      content="initial-scale=1.0">
<meta name="viewport"
      content="width=320.1">

I maintain a Gist with a minimal iOS web app, including startup images and icons. If you want some more commentary, I also wrote a blog post about iPhone 5 startup images.

我使用最小的iOS网络应用程序维护一个Gist，包括启动图像和图标。如果你想要更多的评论，我还写了一篇关于iPhone 5启动图片的博客文章。

#2

Here are the dimensions to use:

以下是要使用的尺寸：

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px)" rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone Tall (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" rel="apple-touch-startup-image" sizes="640x1096">

<!-- iPad (portrait) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">

<!-- iPad (landscape) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">

<!-- iPad (Retina, portrait) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad (Retina, landscape) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

#1

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">