CODEWITHSUNDEEP
ioswordpressios7mobile-safari
Jonáš Vacek
Jonáš Vacek

Reputation: 85

iOS7 and the web-app splash screen trouble

So I have a mobile theme working on my wordpress site and I want to use a splash screen for when users launch the app/site from their home screen. However, for some reason, I cannot get it to work, and I think the reason to this might mainly be the fact I am running iOS7

<link rel="shortcut icon" href="/favicon.png" />

<meta name="apple-mobile-web-app-title" content="The Ixellian">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="http://ixellian.be/splash/iPhone3G-01.png" media="screen and (max-device-width : 320px)">
<link rel="apple-touch-startup-image" href="http://ixellian.be//splash/iPhone4-01.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">
<link rel="apple-touch-startup-image" href="http://ixellian.be//splash/iPhone5-01.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">

This code is in the same place where I have my favicon, the header.php. And I really have no idea what could makeit not work.

I tried to use a plugin to see if someone else's code makes it work, so I tried "Add to home screen WP" plugin and the only thing that it did get working was the fullscreen mode.

Anyone know if the splashscreen thing is an iOS7 bug? If you need any closer details, please go ahead and ask me, I'll gladly help you to help me.

Thanks in advance!

Upvotes: 3

Views: 2798

Answers (2)

Jon&#225;š Vacek
Jon&#225;š Vacek

Reputation: 85

I actually managed to solve it with an updated version of the WP plugin I mentioned before. If that fails, I'd try fcducarte's answer.

Upvotes: 0

Felipe Duarte
Felipe Duarte

Reputation: 1089

Here you have the solution:

http://taylor.fausak.me/2013/11/01/ios-7-web-apps/

The splash images must have the right resolution:

If none of the startup images are the right resolution, Safari will simply display a white screen. Note that all startup images are actually in portrait orientation. Landscape images should be rotated 90 degrees clockwise. There are no landscape startup images for iPhones since they always start in the same orientation.

The resolutions are:

  • iPad retina portrait: 1536x2008px
  • iPad retina landscape: 1496x2048px
  • iPad portrait: 768x1004px
  • iPad landscape: 748x1024px
  • iPhone 4": 640x1096px
  • iPhone 3.5" retina: 640x920px
  • iPhone 3.5": 320x460px

The difference with the full resolution value is due the status bar (20px for non-retina and 40px for retina).

Upvotes: 3

Related Questions