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.