Friday, 7 June 2013

Adding Splash Screen and a Start-up Icon in Your iOS Web App

Here is the detailed documentation on how to add a splash screen to your web app.

1) For Start-Up Screen

while your home page loads in the background, iOS will display a startup screen.

iOS comes with a built-in function called "launch image".

iPhone 4/4S supports a higher screen resolution (what so called Retina Display). In order to support both screen resolution of older iPhone models and latest models, you have to prepare two versions of splash screen images of these sizes:
  • 320 x 480 (for iPhone 2G / 3G / 3GS)
  • 640 x 960 (for iPhone 4 / 4S)
The splash screen image should be in PNG format. By default, you should name the image file for lower screen resolution as “Default.png”.

Below is the code to enable splash screen:

<link rel="apple-touch-startup-image" href="images/boot.png" />

Start-up Image will only work if it has this line:
<meta name="apple-mobile-web-app-capable" content="yes" />

Below are the different sizes you will need for iPad/iPhone/iPod etc.

        <!-- iPhone -->
        <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">
        
        <!-- iPhone (Retina) -->
        <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">
        
        <!-- iPhone 5 -->
        <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">
        
        <!-- iPad Portrait -->
        <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">
        
        <!-- iPad Landscape -->
        <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">
        
        <!-- iPad Portrait (Retina) -->
        <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">
        
        <!-- iPad Landscape (Retina) -->
        <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">

This is the link for detailed information: Home screen icons and startup screens

The output will be:

 


2) For Home Screen Icon :

Put this tag in between <head></head> tags.

<link rel="apple-touch-icon" href="/timentry2.jpg" />
The Image size must be of (57 x 57)

You can also put multiple Images for different resolution of Iphone as below:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />

<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

How it will work: 

Then

Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)