Friday, October 3rd, 2008

iPhone Web Apps running at full screen

Category: iPhone, Mobile

<p>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:

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  2. <meta name="apple-mobile-web-app-capable" content="yes" />
  3. <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Related Content:

Posted by Dion Almaer at 4:03 pm
15 Comments

+++--
3.2 rating from 36 votes

15 Comments »

Comments feed TrackBack URI

This is supposed to work in normal MobileSafari, or a custom WebView wrapper?

Both top and bottom bar are still visible for me.

Comment by tlrobinson — October 3, 2008

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.

Comment by jsmecham — October 3, 2008

Ah, I stand corrected. Just tried it on my iPhone with the released version of 2.1 and it does in fact work.

Comment by jsmecham — October 3, 2008

I’m running 2.1 (5F136) and I too see both top and bottom bars :-/

Comment by iiaann — October 3, 2008

Apparently you have to save the app to your home screen for this to work.

Comment by tlrobinson — October 3, 2008

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

Comment by Jordan — October 4, 2008

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.

Comment by Yves — October 5, 2008

Shouldn’t the last tag be “name” instead of “names”?

Comment by delarge — October 6, 2008

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.

Comment by jgilfelt — October 6, 2008

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

Comment by chini21 — October 6, 2008

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…

Comment by Rygar — November 19, 2008

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:

Comment by inano — March 5, 2009

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.

Comment by inano — March 5, 2009

oops. All the HTML went into the link…
Trying again without ><

From the “Lists” page, I call functions via a href as follows:

“div style=”display: none;” class=”iLayer” id=”waImage” title=”List with image”"
“div style=”min-height: 699px;” class=”iList”"
“ul class=”iArrow”"
“li class=”"”
“a href=”index.php?action=close_shaders”"
“img src=”/image.png” height=”29″” “em “CLose Shaders “/em”
“/a”
“/li”

Comment by DocMarten — August 8, 2009

There’s a halfhearted measure to the “onorientationchange bug” in full-screen mode.
We can execute the following piece of code periodically (e.g. once in a second):

var h = window.innerHeight;
var landscape = (h < 460 && h != 140) ? ‘landscape’ : ‘portrait’;

and, based on the result, fire a custom onorientationchange event when the current orientation is different from the previous one.
I suppose it’ll lead to unjustified performance loss, but I don’t know how to overcome this bug in a more elegant fashion.

Comment by HiveHicks — August 17, 2009

Leave a comment

You must be logged in to post a comment.