Splash Screen for iPhone and iPad on the same HTML/Javascript App

2
votes

I am creating an application in HTML and javascript for iPhone and iPad.
I would like to have a splash screen for both devices since they must have different dimensions.

I know that there is a link tag "apple-touch-startup-image" that allows you to specify the link for the splash screen image.

What do I do if I want to specify 2 different links? I put 2 link tags with rel="apple-touch-startup-image" and 2 different URL?

Will the mobile device take the correct one if I respect the naming convention here? What are the sizes used for the iOS application splash screen?

Thanks!

2
iphoneipadsplash-screen

2 Answers

3
votes

Just figured out how to do this, and it's similar to the apple-touch-icon setup.

Here's my example:

<link rel="apple-touch-startup-image" href="iPhonePortrait.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="iPadPortait.png" />

Just set the "sizes" attribute to the specific width and height and mobile Safari should match it up correctly. You can see the various width/height values from the link you posted, too. Hope it works!

-1
votes

I don't believe this is possible on web apps. The naming convention in that question will not work, it is for native apps.