Skip to content

Instantly share code, notes, and snippets.

@jasonsee

jasonsee/iOS-7-web-app.html

Forked from tfausak/ios-8-web-app.html
Last active August 29, 2015 14:14
Show Gist options
  • Save jasonsee/2683b8988e5c6d3bf2fb to your computer and use it in GitHub Desktop.
Save jasonsee/2683b8988e5c6d3bf2fb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @tfausak 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.
  2. @tfausak 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>
  3. @tfausak 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.
  4. @tfausak 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>
  5. @tfausak 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>
  6. @tfausak 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>