iOS / iPhone：Web应用程序启animation面不显示
我在我的web应用程序的<head>中有下面的代码，但是当DOM加载而不是闪屏时，我的iPhone 3GS上只是白屏。
<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">
如何让我的启animation面在所有版本的iPhone上正确显示？ 代码没有显示，但我的networking应用程序图标正在工作时，添加到主页。 我正在使用jQuery Mobile来构build这个Web应用程序。
我也确认，PNG图像是正确的大小，我已经删除了networking应用程序图标，刷新，并重新添加到主屏幕多次。 我在StackOverflowfind的解决scheme都没有为我工作。 我还没有尝试JavaScript解决scheme，因为我确定有一个纯粹的CSS解决scheme。
sizes属性适用于apple-touch-icon但它不适用于apple-touch-startup-image 。 定位启动图像的唯一方法是使用媒体查询。 亚当的答案是好的，但依赖于<link>是在一个特定的顺序，因为媒体查询是不明确的。 以下是完全合格的媒体查询：
<!-- 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">
另外请注意，某些视口将导致您的Web应用程序在iPhone 5上被letterboxed：
<!-- 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">
我用一个最小的iOSnetworking应用程序来维护Gist ，包括启动图像和图标。 如果你想要更多的评论，我还写了一篇关于iPhone 5启animation面的博客文章 。
这里是使用的尺寸：
<!-- 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">