Meta for iOS 8 web app

html css

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”>


Meta for iOS 8 web app



2.1. iPad retina icon

<link href=”″ sizes=”152×152″ rel=”apple-touch-icon-precomposed”>


2.2. iPad retina icon (iOS < 7)

<link href=”″ sizes=”144×144″ rel=”apple-touch-icon-precomposed”>


2.3. iPad non-retina icon

<link href=”″ sizes=”76×76″ rel=”apple-touch-icon-precomposed”>


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

<link href=”″ sizes=”72×72″ rel=”apple-touch-icon-precomposed”>


2.5. iPhone 6 Plus icon

<link href=”″ sizes=”120×120″ rel=”apple-touch-icon-precomposed”>


2.6. iPhone retina icon (iOS < 7)

<link href=”″ sizes=”114×114″ rel=”apple-touch-icon-precomposed”>


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

<link href=”″ sizes=”57×57″ rel=”apple-touch-icon-precomposed”>



3.1. iPad retina portrait startup image

<link href=”×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=”×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=”×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=”×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=”×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=”×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=”×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=”×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=”×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=”×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.

    html {
        -webkit-text-size-adjust: 100%;


(By tfausak)