Meta for iOS 8 web app

0

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

 

(By tfausak)

About Author

Là một developer rất ham chơi nhưng không ham hố, không ham chơi nhưng rất thích cầm đầu...

Comments are closed.

%d bloggers like this: