The biggest problem I had was after I'd finished the basics: created a homepage icon, set the website to be full screen capable (etc). The front page of my web app opened full screen, but as soon as you click on a link (internal or otherwise), mobile Safari is opened for the target page and all the full screen, app-like goodness is gone.
Prevent Mobile Safari Launching
To keep the user inside your iOS 'app' (and not wandering off into the big fat interweb), embed this cheeky little script right at the end of your <body> tag.<script>(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")</script>And this came from a great little discussion at gist.github.com/1042026. It works on iOS 5.
Mobile Checklist
The best checklist I've found for mobifying your site (mainly for iOS and Android) is at html5rocks.com/en/mobile/mobifying/. But the key points are:- Create iOS/Android homepage icons - of varying sizes.
- Embed the relevant META tags to allow the site to render full screen.
- Optimize your site to take advantage of HTML5 and CSS3 - back to the 90s boys and girls: think of low bandwidth for those truly mobile users.
- Use media queries to tweak your layout for different screen sizes (and portrait/landscape orientation)
- Ensure your site design and UI is built around a touchscreen (big, fat buttons and a vertical layout for the really small devices)
- Keep the user within your app for as long as possible (see above for 'link' issues about preventing Mobile Safari launching).
