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

我在我的网络应用程序的<head>中有以下代码，但我只是在DOM加载而不是闪屏时在我的iPhone 3GS上获得白色屏幕。iOS/iPhone：Web应用程序启动画面不显示

<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来构建这个Web应用程序。

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

来源

2012-09-28 Mark Rummel

的sizes属性适用于apple-touch-icon秒，但它并不适用于apple-touch-startup-image的工作。定位启动图像的唯一方法是使用媒体查询。亚当的答案很好，但依赖于<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">

另外请注意，某些视口将导致对iPhone 5的宽屏化您的Web应用程序：

<!-- 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">

我保持a Gist with a minimal iOS web app，包括启动图像和图标。如果你想要更多的评论，我也写了a blog post about iPhone 5 startup images。

来源

2012-10-03 15:03:20

太棒了！我会试试这些。谢谢！ –

这个工作适合你吗？如果是这样，你能把它标记为已接受吗？ –

如果它可以帮助任何人，iPhone 6的飞溅大小在这里：http://task.alibaba.com/d/26057714/188926 – Dunc

这里有尺寸的使用方法：

<!-- 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">

来源

2012-09-28 16:28:01 adamdehaven

您使用的是iPhone高的“640 x 1096”，但在[Apple iOS人机界面指南]上使用了（http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/ IconsImages.html）他们说它应该是'640 x 1136'。哪个是对的？ –

你不会考虑状态栏占用的40个像素。 “640 x 1136”用于应用发布图片。 '640 x 1096'是正确的。 – adamdehaven

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

回答

相关问题