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應用程序啓動畫面不顯示

回答

相關問題