Friday, October 3rd, 2008
iPhone Web Apps running at full screen
I am so happy that the NDA mess is over! Clancy has written about how you can have your iPhone Web app run in full screen and has a demo app that shows it off:
HTML:
3.3 rating from 25 votes
This is supposed to work in normal MobileSafari, or a custom WebView wrapper?
Both top and bottom bar are still visible for me.
I’m fairly certain that this feature is part of an unreleased version of the iPhone OS. That would mean that this post is in violation of the NDA as the NDA was only lifted for released versions of the OS and tools.
Ah, I stand corrected. Just tried it on my iPhone with the released version of 2.1 and it does in fact work.
I’m running 2.1 (5F136) and I too see both top and bottom bars :-/
Apparently you have to save the app to your home screen for this to work.
Tips such as this one are readily available from the “Safari Web Content Guide for iPhone OS”.
http://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/chapter_8_section_3.html
I wouldn’t recommend this technique…
It breaks the zoom feature .. that’s very frustrating for any user, it also become an accessibility/readability problem.
Shouldn’t the last tag be “name” instead of “names”?
I think you will find that the user-scalable=0 option of the viewport meta tag is what is disabling the zoom function. I actually really like this feature, it is like a Site Specific Browser for mobile Safari. Great for frameworks like iUI and WebApp.net, which currently use JavaScript tricks to “hide” the address bar.
Hi,
While this is great, has anybody looked at why the web app won’t respond to “onorientationchange” events? The browser does not rotate to landscape and fire the orientationchange event.
Any ideas?
Thanks
Well it almost works, I’m trying to create a little prototype with simple hotspots linking together a series of images. However, when linking to a new page it opens a NEW window in Safari?! Any ideas? there doesn’t seem to be much documentation on this topic…
For those that didn’t catch it, the last line was incorrect. Correct one will be meta name and not meta names.
Correct line:
If you don’t like the see through look, you can use the complete black status bar:
my html code didn’t go through in my last post.
just replace names with name and it’ll work.
and optionally replace black-translucent with black if you want a complete black status bar.