iPad Web App Start-Up Image Configuration

Home » Tutorials » Mobile Content » iPad Web App Start-Up Image Configuration

Tutorials / Mobile Content
Friday, 9th Dec, 2011

iPad Web App Start-Up Image Configuration

According to DigiTimes – Oct 2011 report stated that, Apple has shipped 13 million iPad units in Q3 2011, which showing 36.8 percent growth from previous quarter. Due to its large volume of sales, now is getting more web designers and developers are starting to develop web app that behave and looks similar to iOS native app, which allows iOS user to add it to the Home Screen and view it entire screen in iOS.

In order to configure a web app on iOS, your web app must have following list of items:

Web App Icon
Meta Tag of Status Bar Appearance
Meta Tag Standalone Mode
Start-up Image

The Problem

You can find out more details about the items that mentioned above at Apple Developer Home Page. BUT according to the official documentation of Apple, there is no specification of start-up image for iPad yet, which means that, Apple haven’t officially supported start-up image for iPad Web App yet. So how do we solve this problem?

The Solution

First of all, prepare 2 images for your web app:

Landscape : must be exactly 748×1024 pixels
Portrait : must be exactly 768×1004 pixels

Next, let’s insert a link element inside the <head> tag as shown below:

<link rel="apple-touch-startup-image" href="your image path" media="screen resolution" />

To solve the problem, what we need to do is just to add extra media queries inside a link element to detect the resolution of iPad as shown below:

//For landscape mode
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

//For portrait mode
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

That’s all! Now your web app has not only have start-up image for iphone, but for iPad as well.

Live Example

For the live example, please visit onlyWebPro.com via iPad, set it to your Home Screen and launched it from Home Screen.
iPad Web App Start-Up Image Configuration

http://www.logocontestreviews.com/99designs-vs-crowdspring/ 99designs reviews

Nice to read about new trends in iPad. Thanks for bringing useful thoughts.
- http://www.onlywebpro.com onlyWebPro
  
  Thank you! Hv a nice weekend!
Joe Debono

Thank you, this made my day, I’ve been driven nuts trying to get it to work but your clear concise information did the trick.
- http://www.onlywebpro.com onlyWebPro
  
  Hi Joe! you’re welcome! Please follow us on either facebook or Google+ for more useful tips & tricks