iOS6 Safari fullscreen detection

Question

I would like to make use of the new fullscreen function of Safari in iOS6. Now I know that it isn't possible to trigger the fullscreen function from javascript, and that's okay, but I would like to know when the user goes to fullscreen mode. (To display a popup with the text "this website is best viewed in full screen mode" until the user goes fullscreen.)

I've tried setting the window, the document and a 'wrapper' div (with width and height set to 100% in css) onresize events (via normal javascript and via the jQuery 'resize' event), but they are not triggered when I go to full screen mode.

I also set an interval to check the change in width and height of the screen/document/wrapper, but they didn't show any change.

Is there any other way to determine wether the user entered (or left) full screen mode?

Answer 1

Okay, I don't really know why it didn't work before, but I blame the new safari ios debug console (which is now required to go trough safari on your mac), because it didn't always show all logs I sent to the console.

However, when I just appended the messages to the body of the html-document itself, the events WERE working. Binding the jQuery 'resize' event to the window seems to be the best option.

The document height is something around 200 when not full screen and when full screen it's 320.

The simplest solution seems to just work. (Just combine it with an orientation change function, to detect if the iPhone is in landscape mode (http://ajaxian.com/archives/iphone-windowonorientationchange-code)).

    $(window).on('resize', function(){
        if ($(this).height() > 300 && 
           (window.orientation == 90 || window.orientation == -90)) {
            // Full screen!
        } else {
            // Exit full screen!
        }
    });