Dean Clinton's Blog

I’ve been playing around with HTML allowing my new application to be used as a web-app on the iPad and iPhone….

<!-- enables the web app in Safari; simply view the page, press the forward page icon and choose add to home screen -->
<!-- code supplied by http://www.deanclinton.co.uk/blog/2012/01/developing-web-apps-for-ios/ -->

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<!-- standard home screen icon -->
<link rel="apple-touch-icon" href="./touch-icon-iphone.png" />
<!-- ipad home screen icon -->
<link rel="apple-touch-icon" sizes="72x72" href="./touch-icon-ipad.png" />
<!-- iphone4 retina home screen icon -->
<link rel="apple-touch-icon" sizes="114x114" href="./touch-icon-iphone4.png" />

<!-- standard iphone splash screen -->
<link rel="apple-touch-startup-image" href="./iphone.png" />
<!-- iphone4 retina screen splash screen -->
<link rel="apple-touch-startup-image" sizes="640x920" href="./iphone4.png" />
<!-- ipad portrait splash screen -->
<link rel="apple-touch-startup-image" href="./ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- ipad landscape splash screen -->
<link rel="apple-touch-startup-image" href="./ipad-landscape.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- the following JS stops the web-app breaking out into a new safari page with each link -->
<script type="text/javascript">var iWebkit;if(!iWebkit){iWebkit=window.onload=function(){function fullscreen(){var a=document.getElementsByTagName("a");for(var i=0;i<a .length;i++){if(a[i].className.match("noeffect")){}else{a[i].onclick=function(){window.location=this.getAttribute("href");return false}}}}function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){fullscreen();hideURLbar()};iWebkit.init()}}</script></a></script>

Here are the images you’ll need Right-click them and save them.