It has been asked here many times, but without concrete and understandable answers. This is not a child-app, a web-app .
I am using:
& lt; Link rel = "apple-touch-startup-image" href = "picture / startup page" /> To display the startup image, it is fine if the resolution of the image is 320x460. I tried to use the resolution of the retina which is 640x920 (40px is taken by the status bar), which works Was not doing I have tried the @ 2x object, it also failed. Is it possible [yet]?
This will add a splash screen to your web app for both iPad and iPhone / iPod Touch. This will also include the status bar area.
& lt ;! - iPhone - & gt; & Lt; Link href = "http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media = "(device-width: 320px) and (device-height: 480px) and (-webkit -device) -Pixel-ratio: 1) "rel =" apple-touch-startup-image "& gt; & Lt ;! - iPhone (Retina) - & gt; & Lt; Link href = "http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media = "(device-width: 320px) and (device-height: 480px) and (-webkit -device-pixel-ratio: 2) "rel =" apple-touch-startup-image "& gt; & Lt ;! - iPhone 5 - & gt; & Lt; Link href = "http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" media = "(device-width: 320px) and (device-height: 568px) and ( -webkit-device-pixel-ratio: 2) "rel =" apple-touch-startup-image "& gt; & Lt ;! - iPad Portrait - & gt; & Lt; Link href = "http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media = "(device-width: 768px) and (device-height: 1024px) and (Orientation: Portrait) and (-webkit-device-pixel-ratio: 1) "rel =" apple-touch-startup-image "& gt; & Lt ;! - iPad Landscape - & gt; & Lt; Link href = "http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media = "(device-width: 768px) and (device-height: 1024px) and (orientation: Landscape) and (-webkit-device-pixel-ratio: 1) "rel =" apple-touch-startup-image "& gt; & Lt ;! - iPad Portrait (Retina) - & gt; & Lt; Link href = "http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media = "(device-width: 768px) and (device-height: 1024px) and ( Orientation: Portrait) and (-webkit-device-pixel-ratio: 2) "rel =" apple-touch-startup-image "& gt; & Lt ;! - iPad Landscape (Retina) - & gt; & Lt; Link href = "http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media = "(device-width: 768px) and (device-height: 1024px) and ( Orientation: landscape) and (-webkit-device-pixel-ratio: 2) "rel =" apple-touch-startup-image "& gt;
If you want to create a web app for iPad compatibility then it is recommended that both Landscape and Portrait size are used.
Comments
Post a Comment