Skip to content

Instantly share code, notes, and snippets.

@henrypoydar

henrypoydar/iOS-8-web-app.html

Forked from tfausak/ios-8-web-app.html
Last active January 13, 2021 13:18
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save henrypoydar/338ac838516b4951aadf to your computer and use it in GitHub Desktop.
Save henrypoydar/338ac838516b4951aadf to your computer and use it in GitHub Desktop.
Download ZIP
iOS 8 Web App
Raw
iOS-8-web-app.html
<!doctype html>
<html>
<head>
<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Customize home screen title. -->
<meta name="apple-mobile-web-app-title" content="Web App">
<!-- Disable phone number detection. -->
<meta name="format-detection" content="telephone=no">
<!-- Set viewport. -->
<meta name='viewport' content='width=device-width, initial-scale=1, minimal-ui=1, maximum-scale=1'>
<title>iOS 8 Web App</title>
<!-- Icons -->
<link href="/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<link href="/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<link href="/apple-touch-icon-76x76.png" sizes="76x76" rel="apple-touch-icon">
<link href="/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<link href="/apple-touch-icon-120x120.png" sizes="120x120" rel="apple-touch-icon">
<link href="/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">
<link href="/apple-touch-icon-152x152.png" sizes="152x152" rel="apple-touch-icon">
<link href="/apple-touch-icon-180x180.png" sizes="180x180" rel="apple-touch-icon">
<!-- Startup screens -->
<!-- iPhones to subtract 20px*(pixel ratio) from height in portrait only -->
<!-- iPads need to subtract 20px*(pixel ratio) from height in both portrait and landscape -->
<!-- iPhone, iPod Touch, portrait -->
<link href="/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone, iPod Touch, landscape -->
<link href="/apple-touch-startup-image-480x320.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone 4, 4S, portrait -->
<link href="/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 4, 4S, landscape -->
<link href="/apple-touch-startup-image-960x640.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5, 5S, 5C, portrait -->
<link href="/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5, 5S, 5C, landscape -->
<link href="/apple-touch-startup-image-1136x640.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6, portrait -->
<link href="/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6, landscape -->
<link href="/apple-touch-startup-image-1334x750.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6+, portrait -->
<link href="/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPhone 6+, landscape -->
<link href="/apple-touch-startup-image-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPad 1, 2, Mini, portrait -->
<link href="/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad 1, 2, Mini, landscape -->
<link href="/apple-touch-startup-image-1024x748.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad 3, 4, Air, Air 2, Mini 2, Mini 3, portrait -->
<link href="/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad 3, 4, Air, Air 2, Mini 2, Mini 3, landscape -->
<link href="/apple-touch-startup-image-2048x1496.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body>
<h1>iOS 8 Web app</h1>
<p>Add this page to your home screen or <a href="https://gist.github.com/338ac838516b4951aadf">view its source</a>.
</body>
</html>
@ccorcos
Copy link

ccorcos commented Jan 26, 2015

Sweet! It would be great if this would work for Android as well. I don't have an android through so I don't know...

@manelephant
Copy link

Hello thanx for the code,

Do you know why online generators create for example an image of 320x480 when your example is 320x460 ?

@lukehook
Copy link

lukehook commented Apr 7, 2016

@manelephant - The 20px difference is to compensate for the status bar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment