Thursday 15 September 2011

html - Issue with iOS Web App Splash Screen -


I am having a problem with my website using the iOS web app meta information. I do not understand why I have been able to work it for every device except the Retina iPad in the landscape, it is only showing a splash image in the lower left corner, as if it is a non-retina image Is using, but I do not know why it works for portrait orientation.

This is the code I am using:

  & lt ;! - Do not use width = device width because this viewport will be on the letterbox ... on iPhone 5 ... thanks to making this easy - apple - & gt; & Lt; Meta name = "viewport" content = "initial-scale = 1.0, user-scalable = yes" & gt; & Lt ;! - iPhone 4 Retina - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href = "http: //www.reckless-intent.com / Property / images / ios / iphone4.jpg "& gt; & Lt ;! - iPhone 5 Retina - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href = "http: /www.reckless-intent.com/assets/images/ios/iphone5.jpg "& gt; & Lt ;! - iPad Retina Portrait - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 1536px) and (Orientation: Portrait) and (-webkit-device-pixel-ratio: 2)" href = "http: // www. .reckless-intent.com / assets / images / ios / ipadretinaport.jpg "& gt; & Lt ;! - iPad Retina Landscape - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 1536px) and (orientation: scenario) and (-webkit-device-pixel-ratio: 2)" href = "http: // www. .reckless-intent.com / assets / images / ios / ipadretina.jpg "& gt; & Lt ;! - iPad non-retina portrait - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 768px) and (Orientation: Portrait)" href = "http://www.reckless-intent.com/assets/images/ ios / Ipadport.jpg "& gt; & Lt ;! - iPad Non-Retina Landscape - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 768px) and (orientation: scenario)" href = "http://www.reckless-intent.com/assets/images/ ios / Ipad.jpg "& gt;   

The website is active at www.reckless-intent.com If you want to see it running for yourself I have tried to clear my cache and cookies I do not have another iPad, I can test if it is different to see if it is different.

Thank you very much for your time, I appreciate it :)

"Https://i.stack.imgur.com/gZTtv.jpg" alt = "Image of error on Retina iPad">

In the comments thread above, as user Marcus, The solution to the problem was the viewport, it should have been 768 pixels instead of 1536px.

The code below is now working fine now on iPhone 4, 5, and iPad and iPad Retina.

  & lt ;! - iPhone 4 Retina - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href = "http: //www.reckless-intent.com / Property / images / ios / iphone4.jpg "& gt; & Lt ;! - iPhone 5 Retina - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href = "http: /www.reckless-intent.com/assets/images/ios/iphone5.jpg "& gt; & Lt ;! - iPad (picture) - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 768px) and (Orientation: Portrait)" href = "http://www.reckless-intent.com/assets/images/ ios / Ipad.jpg "& gt; & Lt ;! - iPad (landscape) - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 768px) and (orientation: scenario)" href = "http://www.reckless-intent.com/assets/images/ ios / Ipadport.jpg "& gt; & Lt ;! - iPad (Retina, Image) - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 768px) and (orientation: image) and (-webkit-device-pixel-ratio: 2)" href = "http: // www. .reckless-intent.com / assets / images / ios / ipadretinaport.jpg "& gt; & Lt ;! - iPad (retina, landscape) - & gt; & Lt; Link rel = "apple-touch-startup-image" media = "(device-width: 768px) and (orientation: scenario) and (-webkit-device-pixel-ratio: 2)" href = "http: // www. .reckless-intent.com / assets / images / ios / ipadretina.jpg "& gt;    

No comments:

Post a Comment