iOS/iPhone：Web 应用程序启动画面未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12643817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS/iPhone: Web App Splash Screen Not Showing Up
提问by Mark Rummel
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.
我的<head>Web 应用程序中有以下代码，但是当 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">
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 StackOverflow have worked for me. I have not tried the JavaScript solutions, because I'm sure there is a pure CSS solution.
我还确认了 PNG 图像的大小完全正确，并且我多次删除了 Web 应用程序图标、刷新并重新添加到主屏幕。我在 StackOverflow 上找到的所有解决方案都不适合我。我没有尝试过 JavaScript 解决方案，因为我确信有一个纯 CSS 解决方案。
回答by Taylor Fausak
The sizesattribute 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有效，但对s 无效apple-touch-startup-image。定位启动图像的唯一方法是使用媒体查询。Adam 的回答很好，但依赖于<link>s 的特定顺序，因为媒体查询未指定。以下是完全限定的媒体查询：
<!-- 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:
另请注意，某些视口会导致您的 Web 应用程序在 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 web 应用程序维护一个 Gist，包括启动图像和图标。如果你想要更多评论，我还写了一篇关于 iPhone 5 启动图像的博客文章。
回答by adamdehaven
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">
