public
tfausak / iOS-7-web-app.html
Last active

iOS 7 Web App

  • Download Gist
iOS-7-web-app.html
HTML
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 
<!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>
PhoneGapDev commented

Hi... Budy,

i was catching my hair to solve this problem ....
But i got solution form this website ....
Very very thank you ...

gwilson commented

The above doesn't work with iPad retina. The device-width needs to be 768 for both retina and non-retina. The -webkit-device-pixel-ratio: 2 will detect the retina. The image sizes should still be as they are above (1536x2008 and 1496x2048). Thanks for this!

tfausak commented

Good catch, @gwilson. I've updated it to fix that.

I also added support for the iPhone 5.

tfausak commented

A note on viewports with respect to the iPhone 5: Web apps can be letterboxed, but only if their viewport’s width is set to either device-width or 320. To set the proper scale and avoid letterboxing, set the viewport’s initial scale to 1.0. (Thanks to Max Firtman for this solution.)

<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
      content="width=device-width">
<meta name="viewport"
      content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
      content="initial-scale=1.0">
<meta name="viewport"
      content="width=320.1">
perqa commented

This is incredibly useful! What a time-saver! Much better than Apple's own documentation... ;-)

franz-josef-kaiser commented

To target the Safari mobile toolbar:

<meta name="apple-mobile-web-app-status-bar-style" content="translucent black" />
nhoizey commented

Thanks, it's really helpful!

coldes commented

Brilliant, finally someone has the answers - THANK YOU! - iPhone 5 now full screen, no letterbox

FYI, I was using "target-densitydpi=device-dpi" for an android 480x800 along with css media queries, however with adding the above made webapp content on Android very small, so removed, Android phone is now being controlled by iPhone 4 css:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { etc} for PORTRAIT
and
@media screen and (max-device-height: 479px) and (orientation: landscape){ etc} for LANDSCAPE

Might be of interest to someone...

go figure!...

walterrenner commented

thanks for that! really useful!

BernardTeske commented

Wonderful. I sent you a tip. You can get it at flattr.com

themorgantown commented

Thanks!

martinkool commented

Can you explain why the size of the iPhone 5 launch screen is 640x1096 and not 640x1136? Just curious!
Thanks for taking the time to share this with us.

markrummel commented

@martinkool The 40 pixel difference is the status bar at the top.

ldidomen commented

Hi!

Thanks a lot for your script!

dansteidl commented

does anyone have the resolutions for the newer iPad mini?

EDIT: same resolution as iPad 2, nothing else needed.

GertBoers commented

Tested and works on iPhone4s, iPad mini, iPad, iPhone 5, iPod5.
However the splash-screen (startup image) doesn't work on iPad Retina, iPhone3 and iPod Touch.

    <!-- Application name -->
    <title>iOS Webapp</title>

    <!-- Viewport configuration -->

    <!-- Letterboxed on iPhone 5 -->
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=320">
    <!-- Not letterboxed on iPhone 5 -->
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="viewport" content="width=320.1">

    <!-- Webapp capable config -->
    <meta content="yes" name="apple-mobile-web-app-capable"/>

    <!-- Statusbar style -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> -->
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="default"> -->

    <!-- Touch icons -->

    <!-- Note: For disabling effects, add precomposed. For example: rel="apple-touch-icon-precomposed" -->

    <!-- iPhone -->
    <link rel="apple-touch-icon" sizes="57x57" href="img/Icon.png"/>
    <!-- iPad -->
    <link rel="apple-touch-icon" sizes="72x72" href="img/Icon@2x.png"/>
    <!-- iPhone Retina -->
    <link rel="apple-touch-icon" sizes="114x114" href="img/Icon-72.png"/>
    <!-- iPad Retina -->
    <link rel="apple-touch-icon" sizes="144x144" href="img/Icon-72@2x.png"/>

    <!-- Startup images -->

    <!-- iPhone - iPod touch - 320x460 -->
    <!--<link rel="apple-touch-startup-image" href="/startup.png">-->
    <link href="img/Default.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPhone - iPod (Retina) - 640x920 -->
    <link href="img/Default@2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPhone 5 - iPod 5 (Retina) - 640x1096 -->
    <link href="img/Default-568h@2x.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (portrait) - 768x1004 -->
    <link href="img/Default-Portrait~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) - 1024x748 -->
    <link href="img/Default-Landscape~ipad.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, portrait) - 1536x2008 -->
    <link href="img/Default-Portrait@2x~ipad.png" 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) - 1496x2048 -->
    <link href="img/Default-Landscape@2x~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
ChrisLang commented

Thanks this is awesome! very nicely documented!

@ GertBoers - I also noticed that the apple-touch-startup-image didnt work on an iphone 3, just make sure the iphone3 snippet loads last! like below...

Don't ask me why the order matters, it just does! :/

I have the following and it works on the iPhone 3, iPhone 4, iPhone 5 and the iPad in landscape and portrait (excluding the iPad 3) which we currently don't support

    <!-- iPad landscape -->
    <link rel="apple-touch-startup-image" 
            href="images/ipad-landscape.jpg")" 
            media="(device-width: 768px) 
            and (device-height: 1024px) 
            and (orientation: landscape) 
            and (-webkit-device-pixel-ratio: 1)" />
    <!-- iPad portrait -->
    <link rel="apple-touch-startup-image" 
            href="images/ipad-portrait.jpg" 
            media="(device-width: 768px) 
            and (device-height: 1024px) 
            and (orientation: portrait) 
            and (-webkit-device-pixel-ratio: 1)" />
    <!-- iPhone 5 -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone5-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 568px) 
            and (-webkit-device-pixel-ratio: 2)">
    <!-- iPhone (Retina) -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone4-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 480px) 
            and (-webkit-min-device-pixel-ratio: 2)" />
    <!-- iPhone -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 480px) 
            and (-webkit-device-pixel-ratio: 1)" />
tfausak commented

Good find, @GertBoers and @ChrisLang! I only tested iOS 6 devices in the simulator so I didn't discover the bug with the iPhone 3G. I'm surprised that it behaves this way, since I expected it to use the first apple-touch-startup-image it encounters, not the last.

Also, both of you claim that the new iPad doesn't show the startup images. However it works fine for me both in the simulator and on a physical device.

uweschmelzer commented

Hi,

maybe you want to add this tag, too?
It seems to work in IOS 6

TAG
<meta name="apple-mobile-web-app-title" content="My App Name">

PURPOSE
IOS Shorter App title for homescreen
-Available as of IOS6
-Undocumented, thus, throws (ignorable) errors in W3C Validator (as of MAY-2013)
-Max. 13 chars

LINKS
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
http://stackoverflow.com/questions/4883795/what-can-i-do-to-prevent-iphone-4-from-cutting-off-my-title-when-adding-to-home

Cheers
uwe

SebastianLopienski commented

Very useful, thanks a lot!

muzzamo commented

The only problem with this solution is that the filenames you have used are confusing.
eg:

apple-touch-startup-image-640x920.png
apple-touch-startup-image-640x1096.png

the width and height you have used doesn't follow the X * Y convention. Which is width and which is height?

tfausak commented

All the files I use have width x height in their filenames. For example, apple-touch-startup-image-640x1096.png is 640 pixels wide (320 @ 2x) and 1096 pixels tall (568 - 20 @ 2x). That one's for the iPhone 5. Similarly, apple-touch-startup-image-640x920.png is for the iPhone 4(S) and is 640 pixels wide by 920 pixels tall.

studiopersona commented

This is great except that it has no viewport scaling. Once you add in a meta tag for the viewport the downloaded version of the app is letterboxed. This happens even if I add no content like so: <meta name="viewport" content="" />

tfausak commented

@studiopersona: Check out my comment from almost a year ago. You'll want one of these:

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=320.1">

I considered adding the rest of the <meta> tags that Mobile Safari supports, but I want to keep this Gist focused on the icons and startup images.

mbhatton commented

Hi,

I'm pretty sure line 58 is wrong. It is a landscape resolution with a portrait 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)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

It rendered wrong for me anyway so I changed mine to this and it worked

    <link href="http://taylor.fausak.me/static/images/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">

Seems to be in line with https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14

tfausak commented

@mbhatton: That documentation is for native apps. Apple doesn't provide any official documentation for startup images on iPads. To quote my own post:

Note that landscape images are not actually defined as such — they’re taller than they are wide. When you’re creating your assets, make them as landscape images. Then, when you’re ready to publish, rotate them 90° clockwise.

sahilkhosla commented

Any idea how why is the launch image flickering on iOS7? It seems like that it is first stretched all the way to 1136px, then status bar appears and the launch images goes to its actual height of 1096px, resulting in a slight flicker.

scottopolis commented

I'm seeing the same thing as @sahilkhosla. The startup image is stretched to cover the taskbar at the top, then it jumps down and the taskbar is revealed. Any idea how to fix?

patriotbg commented

I have the same problem as @sahilkhosla and @scottopolis. Is anybody have a workaround ?

asantos commented

@tfausak do you know why landscape images are meant to be in portrait mode?

davidpich commented

Thanks so much! very useful! What a time-saver! :)

jjb commented

epic.

simonjking commented

Same problem as @sahilkhosla and @scottopolis and @patriotbg. Will post if I find a solution.

tfausak commented

I updated this to support iOS 7.

@sahilkhosla, @scottopolis, @patriotbg, and @simonjking: There is no way to avoid the flickering. iOS 7 initially stretches the startup image to cover the entire screen. Then when the status bar shows up it renders the startup image at its actual size. If, for example, you specify a 640x1136 startup image (for an iPhone 5 or 5S running iOS 7), it will ignore it because it's not the dimensions it expects.

bhays commented

The current setup for startup images is excluding iPhone 5s. Have tried adjusting the device-width & device-height of the 'iOS 6 & 7 iPhone 5' startup image with no success. Anyone else been able to get a startup image to show in a 5s?

hamecoded commented

@bhays I second you, on 5s I got all my startup images loaded one ontop the other, weird?!

ajagelund commented

Brilliant work!

sunnyat commented

Ios icon generator for all resolutions:

http://iconogen.com/

frank-laemmer commented

sorry for the stupid question: is there a way to only deliver one (the largest) image size, so that the (i)Os does the crunching? i am lazy and don't want to export X images all the time, also my html head looks spammed with images.

Bonxy commented

Thanks for the guide.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.