Created
March 26, 2012 17:21
-
-
Save justin-c-rounds/2206763 to your computer and use it in GitHub Desktop.
Template for iOS web applications and games
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- enable "add to home screen" feature --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <!-- set background color of status bar, either default (standard grey), black (black with white text), or black-translucent (like black but partially transparent and content slips beneath instead of starting just below) --> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
| <!-- viewport configuration (see http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) for more info --> | |
| <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> | |
| <!-- don't turn telephone number looking strings into telephone links --> | |
| <meta name="format-detection" content="telephone=no"> | |
| <!-- iphone web app icon (57x57) --> | |
| <link rel="apple-touch-icon-precomposed" href="data:image/png;base64,BASE64_VERSION_OF_IMAGE_HERE"> | |
| <!-- ipad web app icon (72x72) --> | |
| <link rel="apple-touch-icon-precomposed" sizes="72x72" href="data:image/png;base64,BASE64_VERSION_OF_IMAGE_HERE"> | |
| <!-- iphone4 web app icon (114x114) --> | |
| <link rel="apple-touch-icon-precomposed" sizes="114x114" href="data:image/png;base64,BASE64_VERSION_OF_IMAGE_HERE"> | |
| <!-- iphone web app startup screen (320x460) --> | |
| <link rel="apple-touch-startup-image" href="data:image/png;base64,BASE64_VERSION_OF_IMAGE_HERE"> | |
| <!-- ipad web app landscape startup screen (1024x748) --> | |
| <link rel="apple-touch-startup-image" href="data:image/png;base64,BASE64_VERSION_OF_IMAGE_HERE" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"> | |
| <!-- ipad web app portrait startup screen (768x1004) --> | |
| <link rel="apple-touch-startup-image" href="data:image/png;base64,BASE64_VERSION_OF_IMAGE_HERE" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"> | |
| <!-- title tag should be no more than nine characters (maximum width of the iOS home screen icon label) --> | |
| <title>iTemplate</title> | |
| <script> | |
| window.onload = function () { | |
| // "zoom" is the inverse of the "scale" used in the viewport meta tag (e.g. if scale = 0.5 then zoom = 2) | |
| var container = document.getElementById('container'), zoom = 1; | |
| function resetContainer() { | |
| // we need to make our container div bigger than the window, otherwise the scrollTo hack won't work | |
| switch (window.orientation) { | |
| case 0: | |
| case 180: | |
| container.style.width = (window.screen.width * zoom) + 'px'; | |
| container.style.height = (window.screen.height * zoom) + 'px'; | |
| break; | |
| case -90: | |
| case 90: | |
| container.style.width = (window.screen.height * zoom) + 'px'; | |
| container.style.height = (window.screen.width * zoom) + 'px'; | |
| break; | |
| default: | |
| container.style.width = ''; | |
| container.style.height = ''; | |
| } | |
| } | |
| function resizeContainer() { | |
| // if window.orientation doesn't exist then we're on a browser and don't need to resize | |
| if (window.orientation !== undefined) { | |
| container.style.width = window.innerWidth + 'px'; | |
| container.style.height = window.innerHeight + 'px'; | |
| } | |
| } | |
| function hideAddressBar() { | |
| // scrollTo hack to hide the address bar on iOS | |
| window.scrollTo(0, 0); | |
| resizeContainer(); | |
| } | |
| function touchStart(event) { | |
| // prevent default touch behavior so we can handle touch events with our own handlers | |
| event.preventDefault(); | |
| window.setTimeout(hideAddressBar, 0); | |
| } | |
| function orientationChange() { | |
| resetContainer(); | |
| window.setTimeout(hideAddressBar, 0); | |
| } | |
| document.body.addEventListener('orientationchange', orientationChange, false); | |
| document.addEventListener('touchstart', touchStart, false); | |
| // need to trigger the scrollTo hack via timeout, otherwise it doesn't work | |
| resetContainer(); | |
| window.setTimeout(hideAddressBar, 0); | |
| }; | |
| </script> | |
| <style> | |
| * { | |
| -webkit-user-select: none; /* don't allow user to select text */ | |
| -webkit-touch-callout: none; /* don't popup browser context menu on tap+hold */ | |
| } | |
| div { | |
| position: relative; | |
| } | |
| .container { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| overflow: hidden; | |
| } | |
| @media screen and (orientation: landscape) { | |
| /* add landscape-specific styles here */ | |
| } | |
| @media screen and (orientation: portrait) { | |
| /* add portrait-specific styles here */ | |
| } | |
| @media screen and (-webkit-min-device-pixel-ratio: 2) { | |
| /* add high-res display (e.g. iPhone4) styles here */ | |
| } | |
| @media screen and (min-width: 481px) and (orientation: landscape) { | |
| /* can also combine conditions to provide rules for various screen sizes */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container" class="container"> | |
| PUT STUFF IN HERE | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment