Created
October 5, 2012 16:06
-
-
Save burin/3840737 to your computer and use it in GitHub Desktop.
Full screen web app in iPhone 5 (save to home screen)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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)"> |
Excellent. Thanks.
The meta
tag doesn't allow the attribute media
, so is there an other solution?
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.
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
Fantastic. The size now fits, but the splashscreen doesn't appear.