iOS/iPhone:Web 应用程序启动画面未显示 [英] iOS/iPhone: Web App Splash Screen Not Showing Up
问题描述
我的网络应用程序的 <head> 中有以下代码，但是当 DOM 加载而不是启动画面时，我的 iPhone 3GS 上出现白屏.
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.
<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">
如何让我的启动画面在所有版本的 iPhone 上正确显示?代码未显示，但我的网络应用程序图标在添加到主页后可以正常工作.我正在使用 jQuery Mobile 来构建这个网络应用程序.
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.
我还确认了 PNG 图像的大小完全正确，并且我多次删除了 Web 应用程序图标、刷新并重新添加到主屏幕.我在 StackOverflow 上找到的所有解决方案都不适合我.我没有尝试过 JavaScript 解决方案，因为我确信有一个纯 CSS 解决方案.
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.
推荐答案
sizes 属性适用于 apple-touch-icons 但它不适用于 <代码>apple-touch-startup-images.定位启动图像的唯一方法是使用媒体查询.Adam 的回答很好，但依赖于 的特定顺序，因为媒体查询未指定.以下是完全限定的媒体查询:
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:
<!-- 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">
另请注意，某些视口会导致您的网络应用在 iPhone 5 上显示为信箱:
Also note that certain viewports will cause your web app to be letterboxed on the 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">
我维护一个带有最小 iOS 网络应用程序的 Gist，包括启动图像和图标.如果你想要更多评论，我还写了 一篇关于 iPhone 5 启动图像的博文.
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/iPhone:Web 应用程序启动画面未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
