Skip to content

Instantly share code, notes, and snippets.

@tfausak

tfausak/ios-8-web-app.html

Last active March 16, 2025 16:49
Download ZIP

Revisions

  1. tfausak revised this gist Jun 19, 2015. 1 changed file with 18 additions and 18 deletions.
    36 changes: 18 additions & 18 deletions ios-8-web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,104 +31,104 @@
    <!-- ICONS -->

    <!-- iPad retina icon -->
    <link href="apple-touch-icon-precomposed-152x152.png"
    <link href="https://placehold.it/152"
    sizes="152x152"
    rel="apple-touch-icon-precomposed">

    <!-- iPad retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-144x144.png"
    <link href="https://placehold.it/144"
    sizes="144x144"
    rel="apple-touch-icon-precomposed">

    <!-- iPad non-retina icon -->
    <link href="apple-touch-icon-precomposed-76x76.png"
    <link href="https://placehold.it/76"
    sizes="76x76"
    rel="apple-touch-icon-precomposed">

    <!-- iPad non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-72x72.png"
    <link href="https://placehold.it/72"
    sizes="72x72"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone 6 Plus icon -->
    <link href="apple-touch-icon-precomposed-180x180.png"
    <link href="https://placehold.it/180"
    sizes="120x120"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-114x114.png"
    <link href="https://placehold.it/114"
    sizes="114x114"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-57x57.png"
    <link href="https://placehold.it/57"
    sizes="57x57"
    rel="apple-touch-icon-precomposed">

    <!-- STARTUP IMAGES -->

    <!-- iPad retina portrait startup image -->
    <link href="apple-touch-startup-image-1536x2008.png"
    <link href="https://placehold.it/1536x2008"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: portrait)"
    rel="apple-touch-startup-image">

    <!-- iPad retina landscape startup image -->
    <link href="apple-touch-startup-image-1496x2048.png"
    <link href="https://placehold.it/1496x2048"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: landscape)"
    rel="apple-touch-startup-image">

    <!-- iPad non-retina portrait startup image -->
    <link href="apple-touch-startup-image-768x1004.png"
    <link href="https://placehold.it/768x1004"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 1)
    and (orientation: portrait)"
    rel="apple-touch-startup-image">

    <!-- iPad non-retina landscape startup image -->
    <link href="apple-touch-startup-image-748x1024.png"
    <link href="https://placehold.it/748x1024"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 1)
    and (orientation: landscape)"
    rel="apple-touch-startup-image">

    <!-- iPhone 6 Plus portrait startup image -->
    <link href="apple-touch-startup-image-1242x2148.png"
    <link href="https://placehold.it/1242x2148"
    media="(device-width: 414px) and (device-height: 736px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait)"
    rel="apple-touch-startup-image">

    <!-- iPhone 6 Plus landscape startup image -->
    <link href="apple-touch-startup-image-1182x2208.png"
    <link href="https://placehold.it/1182x2208"
    media="(device-width: 414px) and (device-height: 736px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape)"
    rel="apple-touch-startup-image">

    <!-- iPhone 6 startup image -->
    <link href="apple-touch-startup-image-750x1294.png"
    <link href="https://placehold.it/750x1294"
    media="(device-width: 375px) and (device-height: 667px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPhone 5 startup image -->
    <link href="apple-touch-startup-image-640x1096.png"
    <link href="https://placehold.it/640x1096"
    media="(device-width: 320px) and (device-height: 568px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPhone < 5 retina startup image -->
    <link href="apple-touch-startup-image-640x920.png"
    <link href="https://placehold.it/640x920"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPhone < 5 non-retina startup image -->
    <link href="apple-touch-startup-image-320x460.png"
    <link href="https://placehold.it/320x460"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">
    @@ -146,4 +146,4 @@
    <body>
    <h1>iOS 8 web app</h1>
    </body>
    </html>
    </html>
  2. tfausak revised this gist Feb 24, 2015. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions ios-8-web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,37 +31,37 @@
    <!-- ICONS -->

    <!-- iPad retina icon -->
    <link href="apple-touch-icon-precomposed-152.png"
    <link href="apple-touch-icon-precomposed-152x152.png"
    sizes="152x152"
    rel="apple-touch-icon-precomposed">

    <!-- iPad retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-144.png"
    <link href="apple-touch-icon-precomposed-144x144.png"
    sizes="144x144"
    rel="apple-touch-icon-precomposed">

    <!-- iPad non-retina icon -->
    <link href="apple-touch-icon-precomposed-76.png"
    <link href="apple-touch-icon-precomposed-76x76.png"
    sizes="76x76"
    rel="apple-touch-icon-precomposed">

    <!-- iPad non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-72.png"
    <link href="apple-touch-icon-precomposed-72x72.png"
    sizes="72x72"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone 6 Plus icon -->
    <link href="apple-touch-icon-precomposed-180.png"
    <link href="apple-touch-icon-precomposed-180x180.png"
    sizes="120x120"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-114.png"
    <link href="apple-touch-icon-precomposed-114x114.png"
    sizes="114x114"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-57.png"
    <link href="apple-touch-icon-precomposed-57x57.png"
    sizes="57x57"
    rel="apple-touch-icon-precomposed">

  3. tfausak revised this gist Jan 28, 2015. 2 changed files with 149 additions and 116 deletions.
    116 changes: 0 additions & 116 deletions iOS-7-web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,116 +0,0 @@
    <!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="initial-scale=1">

    <!-- Prevent text size adjustment on orientation change. -->
    <style>html { -webkit-text-size-adjust: 100%; }</style>

    <title>iOS 7 Web App</title>

    <!-- Icons -->

    <!-- iOS 7 iPad (retina) -->
    <link href="/static/images/apple-touch-icon-152x152.png"
    sizes="152x152"
    rel="apple-touch-icon">

    <!-- iOS 6 iPad (retina) -->
    <link href="/static/images/apple-touch-icon-144x144.png"
    sizes="144x144"
    rel="apple-touch-icon">

    <!-- iOS 7 iPhone (retina) -->
    <link href="/static/images/apple-touch-icon-120x120.png"
    sizes="120x120"
    rel="apple-touch-icon">

    <!-- iOS 6 iPhone (retina) -->
    <link href="/static/images/apple-touch-icon-114x114.png"
    sizes="114x114"
    rel="apple-touch-icon">

    <!-- iOS 7 iPad -->
    <link href="/static/images/apple-touch-icon-76x76.png"
    sizes="76x76"
    rel="apple-touch-icon">

    <!-- iOS 6 iPad -->
    <link href="/static/images/apple-touch-icon-72x72.png"
    sizes="72x72"
    rel="apple-touch-icon">

    <!-- iOS 6 iPhone -->
    <link href="/static/images/apple-touch-icon-57x57.png"
    sizes="57x57"
    rel="apple-touch-icon">

    <!-- Startup images -->

    <!-- iOS 6 & 7 iPad (retina, portrait) -->
    <link href="/static/images/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">

    <!-- iOS 6 & 7 iPad (retina, landscape) -->
    <link href="/static/images/apple-touch-startup-image-1496x2048.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: landscape)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iOS 6 iPad (portrait) -->
    <link href="/static/images/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">

    <!-- iOS 6 iPad (landscape) -->
    <link href="/static/images/apple-touch-startup-image-748x1024.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: landscape)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">

    <!-- iOS 6 & 7 iPhone 5 -->
    <link href="/static/images/apple-touch-startup-image-640x1096.png"
    media="(device-width: 320px) and (device-height: 568px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iOS 6 & 7 iPhone (retina) -->
    <link href="/static/images/apple-touch-startup-image-640x920.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iOS 6 iPhone -->
    <link href="/static/images/apple-touch-startup-image-320x460.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">
    </head>

    <body>
    <h1>iOS 7 Web app</h1>

    <p>Add this page to your home screen or <a href="https://gist.github.com/tfausak/2222823">view its source</a>.
    </body>
    </html>
    149 changes: 149 additions & 0 deletions ios-8-web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,149 @@
    <!doctype html>

    <!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

    <html>
    <head>
    <title>iOS 8 web app</title>

    <!-- CONFIGURATION -->

    <!-- Allow web app to be run in full-screen mode. -->
    <meta name="apple-mobile-web-app-capable"
    content="yes">

    <!-- Make the app title different than the page title. -->
    <meta name="apple-mobile-web-app-title"
    content="iOS 8 web app">

    <!-- Configure the status bar. -->
    <meta name="apple-mobile-web-app-status-bar-style"
    content="black">

    <!-- Set the viewport. -->
    <meta name="viewport"
    content="initial-scale=1">

    <!-- Disable automatic phone number detection. -->
    <meta name="format-detection"
    content="telephone=no">

    <!-- ICONS -->

    <!-- iPad retina icon -->
    <link href="apple-touch-icon-precomposed-152.png"
    sizes="152x152"
    rel="apple-touch-icon-precomposed">

    <!-- iPad retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-144.png"
    sizes="144x144"
    rel="apple-touch-icon-precomposed">

    <!-- iPad non-retina icon -->
    <link href="apple-touch-icon-precomposed-76.png"
    sizes="76x76"
    rel="apple-touch-icon-precomposed">

    <!-- iPad non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-72.png"
    sizes="72x72"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone 6 Plus icon -->
    <link href="apple-touch-icon-precomposed-180.png"
    sizes="120x120"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-114.png"
    sizes="114x114"
    rel="apple-touch-icon-precomposed">

    <!-- iPhone non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-57.png"
    sizes="57x57"
    rel="apple-touch-icon-precomposed">

    <!-- STARTUP IMAGES -->

    <!-- iPad retina portrait startup image -->
    <link href="apple-touch-startup-image-1536x2008.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: portrait)"
    rel="apple-touch-startup-image">

    <!-- iPad retina landscape startup image -->
    <link href="apple-touch-startup-image-1496x2048.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: landscape)"
    rel="apple-touch-startup-image">

    <!-- iPad non-retina portrait startup image -->
    <link href="apple-touch-startup-image-768x1004.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 1)
    and (orientation: portrait)"
    rel="apple-touch-startup-image">

    <!-- iPad non-retina landscape startup image -->
    <link href="apple-touch-startup-image-748x1024.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (-webkit-device-pixel-ratio: 1)
    and (orientation: landscape)"
    rel="apple-touch-startup-image">

    <!-- iPhone 6 Plus portrait startup image -->
    <link href="apple-touch-startup-image-1242x2148.png"
    media="(device-width: 414px) and (device-height: 736px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait)"
    rel="apple-touch-startup-image">

    <!-- iPhone 6 Plus landscape startup image -->
    <link href="apple-touch-startup-image-1182x2208.png"
    media="(device-width: 414px) and (device-height: 736px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape)"
    rel="apple-touch-startup-image">

    <!-- iPhone 6 startup image -->
    <link href="apple-touch-startup-image-750x1294.png"
    media="(device-width: 375px) and (device-height: 667px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPhone 5 startup image -->
    <link href="apple-touch-startup-image-640x1096.png"
    media="(device-width: 320px) and (device-height: 568px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPhone < 5 retina startup image -->
    <link href="apple-touch-startup-image-640x920.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPhone < 5 non-retina startup image -->
    <link href="apple-touch-startup-image-320x460.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">

    <!-- HACKS -->

    <!-- Prevent text size change on orientation change. -->
    <style>
    html {
    -webkit-text-size-adjust: 100%;
    }
    </style>
    </head>

    <body>
    <h1>iOS 8 web app</h1>
    </body>
    </html>
  4. tfausak renamed this gist Oct 31, 2013. 1 changed file with 0 additions and 0 deletions.
    0 ios-web-app.html → iOS-7-web-app.html
    View file
    File renamed without changes.
  5. tfausak revised this gist Oct 31, 2013. 1 changed file with 82 additions and 36 deletions.
    118 changes: 82 additions & 36 deletions ios-web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,69 +2,115 @@

    <html>
    <head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- Run in full-screen mode. -->
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>iOS Web App</title>
    <!-- Make the status bar black with white text. -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- iPhone -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-57x57.png"
    sizes="57x57"
    <!-- 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="initial-scale=1">

    <!-- Prevent text size adjustment on orientation change. -->
    <style>html { -webkit-text-size-adjust: 100%; }</style>

    <title>iOS 7 Web App</title>

    <!-- Icons -->

    <!-- iOS 7 iPad (retina) -->
    <link href="/static/images/apple-touch-icon-152x152.png"
    sizes="152x152"
    rel="apple-touch-icon">

    <!-- iOS 6 iPad (retina) -->
    <link href="/static/images/apple-touch-icon-144x144.png"
    sizes="144x144"
    rel="apple-touch-icon">

    <!-- iOS 7 iPhone (retina) -->
    <link href="/static/images/apple-touch-icon-120x120.png"
    sizes="120x120"
    rel="apple-touch-icon">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-320x460.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">

    <!-- iPhone (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-114x114.png"
    <!-- iOS 6 iPhone (retina) -->
    <link href="/static/images/apple-touch-icon-114x114.png"
    sizes="114x114"
    rel="apple-touch-icon">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-640x920.png"
    media="(device-width: 320px) and (device-height: 480px)

    <!-- iOS 7 iPad -->
    <link href="/static/images/apple-touch-icon-76x76.png"
    sizes="76x76"
    rel="apple-touch-icon">

    <!-- iOS 6 iPad -->
    <link href="/static/images/apple-touch-icon-72x72.png"
    sizes="72x72"
    rel="apple-touch-icon">

    <!-- iOS 6 iPhone -->
    <link href="/static/images/apple-touch-icon-57x57.png"
    sizes="57x57"
    rel="apple-touch-icon">

    <!-- Startup images -->

    <!-- iOS 6 & 7 iPad (retina, portrait) -->
    <link href="/static/images/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">

    <!-- iPhone 5 -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-640x1096.png"
    media="(device-width: 320px) and (device-height: 568px)
    <!-- iOS 6 & 7 iPad (retina, landscape) -->
    <link href="/static/images/apple-touch-startup-image-1496x2048.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: landscape)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPad -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-72x72.png"
    sizes="72x72"
    rel="apple-touch-icon">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-768x1004.png"
    <!-- iOS 6 iPad (portrait) -->
    <link href="/static/images/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">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-748x1024.png"

    <!-- iOS 6 iPad (landscape) -->
    <link href="/static/images/apple-touch-startup-image-748x1024.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: landscape)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">

    <!-- iPad (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-144x144.png"
    sizes="144x144"
    rel="apple-touch-icon">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1536x2008.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: portrait)
    <!-- iOS 6 & 7 iPhone 5 -->
    <link href="/static/images/apple-touch-startup-image-640x1096.png"
    media="(device-width: 320px) and (device-height: 568px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1496x2048.png"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: landscape)

    <!-- iOS 6 & 7 iPhone (retina) -->
    <link href="/static/images/apple-touch-startup-image-640x920.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iOS 6 iPhone -->
    <link href="/static/images/apple-touch-startup-image-320x460.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">
    </head>

    <body>
    <h1>iOS Web App</h1>
    <h1>iOS 7 Web app</h1>

    <p>Add this app to your home screen or <a href="https://gist.github.com/tfausak/2222823">view its source</a>.
    <p>Add this page to your home screen or <a href="https://gist.github.com/tfausak/2222823">view its source</a>.
    </body>
    </html>
    </html>
  6. tfausak renamed this gist Apr 11, 2013. 1 changed file with 0 additions and 0 deletions.
    0 web-app.html → ios-web-app.html
    View file
    File renamed without changes.
  7. tfausak revised this gist Apr 11, 2013. 1 changed file with 8 additions and 2 deletions.
    10 changes: 8 additions & 2 deletions web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,8 @@
    <head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title></title>

    <title>iOS Web App</title>

    <!-- iPhone -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-57x57.png"
    @@ -60,5 +61,10 @@
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">
    </head>
    <body></body>

    <body>
    <h1>iOS Web App</h1>

    <p>Add this app to your home screen or <a href="https://gist.github.com/tfausak/2222823">view its source</a>.
    </body>
    </html>
  8. tfausak revised this gist Sep 20, 2012. 1 changed file with 31 additions and 27 deletions.
    58 changes: 31 additions & 27 deletions web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,57 +4,61 @@
    <head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title></title>

    <!-- iPhone -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-57x57.png"
    sizes="57x57"
    rel="apple-touch-icon">
    <!-- iPad -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-72x72.png"
    sizes="72x72"
    rel="apple-touch-icon">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-320x460.png"
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">

    <!-- iPhone (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-114x114.png"
    sizes="114x114"
    rel="apple-touch-icon">
    <!-- iPad (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-144x144.png"
    sizes="144x144"
    rel="apple-touch-icon">

    <!-- iPhone -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-320x460.png"
    media="(device-width: 320px)"
    rel="apple-touch-startup-image">
    <!-- iPhone (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-640x920.png"
    media="(device-width: 320px)
    media="(device-width: 320px) and (device-height: 480px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">
    <!-- iPad (portrait) -->

    <!-- iPhone 5 -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-640x1096.png"
    media="(device-width: 320px) and (device-height: 568px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <!-- iPad -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-72x72.png"
    sizes="72x72"
    rel="apple-touch-icon">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-768x1004.png"
    media="(device-width: 768px)
    and (orientation: portrait)"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: portrait)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">
    <!-- iPad (landscape) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-748x1024.png"
    media="(device-width: 768px)
    and (orientation: landscape)"
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: landscape)
    and (-webkit-device-pixel-ratio: 1)"
    rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) -->

    <!-- iPad (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-144x144.png"
    sizes="144x144"
    rel="apple-touch-icon">
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1536x2008.png"
    media="(device-width: 1536px)
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: portrait)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">
    <!-- iPad (Retina, landscape) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1496x2048.png"
    media="(device-width: 1536px)
    media="(device-width: 768px) and (device-height: 1024px)
    and (orientation: landscape)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <title></title>
    </head>
    <body></body>
    </html>
  9. tfausak created this gist Mar 28, 2012.
    60 changes: 60 additions & 0 deletions web-app.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    <!doctype html>

    <html>
    <head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">

    <!-- iPhone -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-57x57.png"
    sizes="57x57"
    rel="apple-touch-icon">
    <!-- iPad -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-72x72.png"
    sizes="72x72"
    rel="apple-touch-icon">
    <!-- iPhone (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-114x114.png"
    sizes="114x114"
    rel="apple-touch-icon">
    <!-- iPad (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-icon-144x144.png"
    sizes="144x144"
    rel="apple-touch-icon">

    <!-- iPhone -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-320x460.png"
    media="(device-width: 320px)"
    rel="apple-touch-startup-image">
    <!-- iPhone (Retina) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-640x920.png"
    media="(device-width: 320px)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">
    <!-- iPad (portrait) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-768x1004.png"
    media="(device-width: 768px)
    and (orientation: portrait)"
    rel="apple-touch-startup-image">
    <!-- iPad (landscape) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-748x1024.png"
    media="(device-width: 768px)
    and (orientation: landscape)"
    rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1536x2008.png"
    media="(device-width: 1536px)
    and (orientation: portrait)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">
    <!-- iPad (Retina, landscape) -->
    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1496x2048.png"
    media="(device-width: 1536px)
    and (orientation: landscape)
    and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image">

    <title></title>
    </head>
    <body></body>
    </html>