Meta for iOS 8 web app

Meta for iOS 8 web app

1. Configuration 

1.1. Allow web app to be run in full-screen mode.

<meta name=”apple-mobile-web-app-capable” content=”yes”>

 

1.2. Make the app title different than the page title.

<meta name=”apple-mobile-web-app-title” content=”iOS 8 web app”>

 

1.3. Configure the status bar.

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

 

1.4. Set the viewport.

<meta name=”viewport” content=”initial-scale=1″>

 

1.5. Disable automatic phone number detection.

<meta name=”format-detection” content=”telephone=no”>

 

 

2. ICONS

2.1. iPad retina icon

<link href=”https://placehold.it/152″ sizes=”152×152″ rel=”apple-touch-icon-precomposed”>

 

2.2. iPad retina icon (iOS < 7)

<link href=”https://placehold.it/144″ sizes=”144×144″ rel=”apple-touch-icon-precomposed”>

 

2.3. iPad non-retina icon

<link href=”https://placehold.it/76″ sizes=”76×76″ rel=”apple-touch-icon-precomposed”>

 

2.4. iPad non-retina icon (iOS < 7)

<link href=”https://placehold.it/72″ sizes=”72×72″ rel=”apple-touch-icon-precomposed”>

 

2.5. iPhone 6 Plus icon

<link href=”https://placehold.it/180″ sizes=”120×120″ rel=”apple-touch-icon-precomposed”>

 

2.6. iPhone retina icon (iOS < 7)

<link href=”https://placehold.it/114″ sizes=”114×114″ rel=”apple-touch-icon-precomposed”>

 

2.7. iPhone non-retina icon (iOS < 7)

<link href=”https://placehold.it/57″ sizes=”57×57″ rel=”apple-touch-icon-precomposed”>

 

3. STARTUP IMAGES

3.1. iPad retina portrait startup image

<link href=”https://placehold.it/1536×2008″ media=”(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image”>

 

3.2. iPad retina landscape startup image

<link href=”https://placehold.it/1496×2048″ media=”(device-width: 768px) and (device-height: 1024px)

and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” rel=”apple-touch-startup-image”>

 

3.3. iPad non-retina portrait startup image

<link href=”https://placehold.it/768×1004″ media=”(device-width: 768px) and (device-height: 1024px)

and (-webkit-device-pixel-ratio: 1) and (orientation: portrait)” rel=”apple-touch-startup-image”>

 

3.4. iPad non-retina landscape startup image

<link href=”https://placehold.it/748×1024″ media=”(device-width: 768px) and (device-height: 1024px)

and (-webkit-device-pixel-ratio: 1) and (orientation: landscape)” rel=”apple-touch-startup-image”>

 

3.5. iPhone 6 Plus portrait startup image

<link href=”https://placehold.it/1242×2148″ media=”(device-width: 414px) and (device-height: 736px)

and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)” rel=”apple-touch-startup-image”>

 

3.6. iPhone 6 Plus landscape startup image

<link href=”https://placehold.it/1182×2208″ media=”(device-width: 414px) and (device-height: 736px)

and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)” rel=”apple-touch-startup-image”>

 

3.7. iPhone 6 startup image

<link href=”https://placehold.it/750×1294″ media=”(device-width: 375px) and (device-height: 667px)

and (-webkit-device-pixel-ratio: 2)” rel=”apple-touch-startup-image”>

 

3.8. iPhone 5 startup image

<link href=”https://placehold.it/640×1096″ media=”(device-width: 320px) and (device-height: 568px)

and (-webkit-device-pixel-ratio: 2)” rel=”apple-touch-startup-image”>

 

3.9. iPhone < 5 retina startup image

<link href=”https://placehold.it/640×920″ media=”(device-width: 320px) and (device-height: 480px)

and (-webkit-device-pixel-ratio: 2)” rel=”apple-touch-startup-image”>

 

3.10. iPhone < 5 non-retina startup image

<link href=”https://placehold.it/320×460″ media=”(device-width: 320px) and (device-height: 480px)

and (-webkit-device-pixel-ratio: 1)” rel=”apple-touch-startup-image”>

 

4.  Prevent text size change on orientation change.

<style>
    html {
        -webkit-text-size-adjust: 100%;
    }
</style>

 

(By tfausak)