How to require fullscreen mode in a jQTouch application?

Question

I'm using jQTouch to develop a version of a website optimized for safari on the iphone. The jQTouch demo helpfully shows how to show an "install this" message for users not using full screen mode and hide it for those who are. When in fullscreen mode, the body should have the class "fullscreen." So you can hide the "install this" message for people who have already added your app to their home page by adding this css rule to your stylesheet:

body.fullscreen #home .info {
    display: none;
}

What I'd like to do is require users to use the app in fullscreen mode only. When viewed from the regular browser, they should only see a message asking them to install the app. That message should of course be hidden otherwise.

This ought to be really, really easy, so I must just be missing something obvious.

I thought one way to do this would be to simply test for the class "fullscreen" on the body: if it's not there, use goTo to get to another div, or hide the other divs, or something like that.

Strangely, however, this doesn't work. As a test, I've still got the original "info" message, as in the jQTouch demo, and it doesn't show up when I launch in fullscreen mode. So the body must have the fullscreen class. And yet I can't find any other trace of it: when I put this alert to test things after the document has loaded, I get nothing when launching in fullscreen mode:

alert($("body").attr("class"));

I also thought I might test for fullscreen mode by checking for the value of the fullScreen boolean. But this doesn't seem to work either. What am I missing? What is the best way to do this?

Answer 1

Well, I couldn't figure out why the standard way wasn't working, but someone on the jQTouch Google Group suggested this, which works:

    if (window.navigator.standalone) {
   alert ('Thanks for launching this app your home screen')
} else {

   alert('Add this app to your home screen for the best experience')

}