In a previous post I wrote about creating a HTML5 site which also worked as an iPhone Web App. If the web app needs to also support iPad integration, there are a few more lines needed in the HTML as well as a couple more loading images.
The following code needs to go in the head section of the HTML:
<!--iPad and iPhone startup app screens --> <!-- iPhone startup image --> <link rel="apple-touch-startup-image" href="https://siteURL/Images/startup.png"/> <!-- iPad startup image portrait view --> <link rel="apple-touch-startup-image" href="https://siteURL/Images/startup_ipad.png" media="no mobile, screen and (device-width: 768px) and (orientation:portrait)"/> <!-- iPad startup image landscape view --> <link rel="apple-touch-startup-image" href="https:/siteURL/Images/startup_ipad_hor.png" media="no mobile, screen and (device-width: 768px) and (orientation:landscape)"/>
The code above specifies different startup images for different devices. The iPad can load web apps either when placed horizontally or vertically. This means it requires two loading images.
Startup png images for iPad should have the following dimensions:
Default Portrait png should be 768w x 1004h
Default Landscape png should be 1024w x 748h
