आईओएस/आईफोन: वेब ऐप स्पलैश स्क्रीन

मेरे वेब ऐप के <head> में निम्न कोड नहीं है, लेकिन मुझे अपने आईफोन 3 जीएस पर एक सफेद स्क्रीन मिल रही है जबकि डीओएम स्प्लैश स्क्रीन के बजाय लोड हो रहा है।आईओएस/आईफोन: वेब ऐप स्पलैश स्क्रीन

<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 मोबाइल का उपयोग कर रहा हूं।

मैंने यह भी पुष्टि की है कि पीएनजी छवियां बिल्कुल सही आकार हैं और मैंने वेब ऐप आइकन हटा दिया है, ताज़ा किया है, और कई बार होमस्क्रीन में फिर से जोड़ा है। StackOverflow पर मिले समाधानों में से कोई भी मेरे लिए काम नहीं किया है। मैंने जावास्क्रिप्ट समाधान की कोशिश नहीं की है, क्योंकि मुझे यकीन है कि एक शुद्ध सीएसएस समाधान है।

स्रोत

2012-09-28 Mark Rummel

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

भी ध्यान रखें कि कुछ व्यूपोर्ट अपने वेब एप्लिकेशन 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">

मैं a Gist with a minimal iOS web app बनाए रखने, स्टार्टअप छवियों और आइकनों सहित । अगर आप कुछ और टिप्पणी चाहते हैं, तो मैंने a blog post about iPhone 5 startup images भी लिखा था।

स्रोत

2012-10-03 15:03:20

बहुत बढ़िया! मैं इन कोशिश करूँगा। धन्यवाद! –

क्या यह आपके लिए काम करता है? यदि हां, तो क्या आप इसे स्वीकार्य मान सकते हैं? –

अगर यह किसी की मदद करता है, तो आईफोन 6 स्पलैश आकार यहां हैं: http://stackoverflow.com/a/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

आपने आईफोन टाल के लिए '640 x 1096' का उपयोग किया, लेकिन [ऐप्पल के आईओएस मानव इंटरफेस दिशानिर्देश] पर (http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/ Icononsmages.html) वे कहते हैं कि यह '640 x 1136' होना चाहिए। कौन सा सही है? –

आप स्टेटस बार द्वारा उठाए गए 40 पिक्सेल के लिए लेखांकन नहीं कर रहे हैं। एक ऐप लॉन्च छवि के लिए '640 x 1136' है। '640 x 1096' सही है। – adamdehaven

आईओएस/आईफोन: वेब ऐप स्पलैश स्क्रीन

उत्तर

संबंधित मुद्दे