iOS 8 Web App Startup Image

/ / Blog, Digital Development en
keensoft in the press again: Colombia´s mission
New iTunes Connect

After working on the optimization of hybrid apps with iOS 8, we have to add the new screen size of the iPhone6 and iPhone 6 Plus. With regard to native apps, the proportions are those indicated on Apple’s Human Interface Guidelines website:

For iPhone 6:

  • 750 x 1334 (@2x) for portrait
  • 1334 x 750 (@2x) for landscape

For iPhone 6 Plus:

  • 1242 x 2208 (@3x) for portrait
  • 2208 x 1242 (@3x) for landscape

If using safari mobile, to use “apple-touch-startup-image” in our webapp (it allows the splashscreen to be displayed when the web app is on the home screen of the iPhone/iPad), we must bear in mind that the size of the status bar is 20px for basic resolution.

For this reason, when we include the start screen this size has to be deducted from the total size of the device; the code to include in our HTML would be as follows:

<!– iOS 8 iPhone 6 (portrait) –>
<link rel=”apple-touch-startup-image” href=”apple-touch-startup-image-750×1294.png”
media=”(max-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)”>
<!– iOS 8 iPhone 6 Plus (portrait) –>
<link rel=”apple-touch-startup-image” href=”apple-touch-startup-image-1242×2148.png”
media=”(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)”>

 

The following images are used in the previous code:

apple-touch-startup-image-750x1294

apple-touch-startup-image-750×1294

apple-touch-startup-image-1242×2148

apple-touch-startup-image-1242×2148

 

My life is mobile, think in mobile, go everywhere with my mobile and most of the times call with my mobile.