Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Full screen web app in iPhone 5 (save to home screen)
<!-- standard viewport tag to set the viewport to the device's width
, Android 2.3 devices need this so 100% width works properly and
doesn't allow children to blow up the viewport width-->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<!-- width=device-width causes the iPhone 5 to letterbox the app, so
we want to exclude it for iPhone 5 to allow full screen apps -->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />
<!-- provide the splash screens for iPhone 5 and previous -->
<link href="assets/splashs/splash_1096.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="assets/splashs/splash_iphone_2x.png" rel="apple-touch-startup-image" sizes="640x960" media="(device-height: 480px)">
@joacimnilsson

This comment has been minimized.

Copy link

commented Jan 10, 2013

Thank you! :D

@joacimnilsson

This comment has been minimized.

Copy link

commented Jan 10, 2013

Do you know how to prevent the webapp to change window while you click links?

@joacimnilsson

This comment has been minimized.

Copy link

commented Jan 10, 2013

Found the solution

(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")

@jesseditson

This comment has been minimized.

Copy link

commented Feb 15, 2013

Thanks for this!

Also, @joacimnilsson, thanks for your script as well. Did the trick.

@joacimnilsson

This comment has been minimized.

Copy link

commented Feb 28, 2013

No problem ^^ Glad it helped! Now is it one thing from having an native feeling. An that's the 300ms delay. I've tried fastclick.js and it works but have now heard that chorme will remove the 300ms delay if the screen have a fixed viewport.

@spielerinternet

This comment has been minimized.

Copy link

commented Mar 8, 2013

Fantastic. The size now fits, but the splashscreen doesn't appear.

@defmech

This comment has been minimized.

Copy link

commented Apr 1, 2013

Excellent. Thanks.

@chkpnt

This comment has been minimized.

Copy link

commented May 28, 2013

The meta tag doesn't allow the attribute media, so is there an other solution?

@studiopersona

This comment has been minimized.

Copy link

commented Aug 24, 2013

It seems that something has changed. The use of any viewport meta tag (even with content="") in a web app will cause the downloaded version to letterbox on an iPhone 5. Yet if you leave out the tag, navigate to the URL, download the app, it will open full screen, but of course the scaling is off. Now go back and place your meta tag into the document head and you get your app at full screen with the appropriate scaling.
Not very useful in the wild.

@meetkarthiksv89

This comment has been minimized.

Copy link

commented Jan 6, 2014

Not working.... Actually my deployment target is 4.1... Is it the problem with that? Please help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.