Can I query the no-URL-bar mobile Safari window height in a platform-neutral way?

Question

I'm writing a little side-scrolling text reader widget similar to what you get in the iPhone app store where the panel of screenshots for an app is this different, horizontally-scrolling panel embedded within the main vertically-scrolling panel.

In all versions (including full-res keyboard/mouse computer style) the panel takes up 100% of the width of the container, so it's like a horizontal stripe across the page.

In the small-res touch-interface version, i.e. for smartphones, I want it to also resize to be the full height of the window so that when you scroll vertically to it, it can take up the full screen.

The iPhone makes this tricky because the $(window).height() or however you want to query it seems to depend on whether or not the URL bar is visible.

Without special-casing the code to know if it's on an iPhone, or adding in hacks to scroll the window to get the URL bar off and then query the height, is there a way to ask Safari mobile, "what's the window height" that will yield, on my 3GS, an answer of 416 regardless of whether the URL bar is currently visible or not?

I want to find a platform-neutral way to ask, for all major smartphones, "what height can I set this panel to so that when you scroll to it, it fills the whole browser window?"

Thanks, been beating my head against this for a while and already dug around on here and couldn't find this specific info.

Answer 1

I was looking for a solution to this also. No success. I ended up with a hack like you actually wanted to avoid. But as there seems to be no other solution around, I thought I leave the details here:

In my case the page contains nothing but a layer with one image that ought to be as big as the viewport allows, keeping the original aspect ratio. So I have a function I call on load and oriantation-change and it goes like this:

function updateImgLayer() {
    $('#imgLayer img').hide(); // to prevent flickering
    $('#imgLayer').height("5000px"); // to be sure it's bigger then the viewport    

    // timeout of zero ms makes sure layer-resize is finished in mobile-safari
    // the android-browser seems to need more time – set it to 300 ms there.
    setTimeout(function() {
        window.scrollTo(0, 1); // scroll the url-bar out

        $('#imgLayer').height(window.innerHeight + "px");

        var imgH = $('#imgLayer .height').text(); // wrote img-dimensions in there by php

        // the rest is to scale the image
        var imgW = $('#imgLayer .width').text();
        var winH = window.innerHeight;
        var winW = $(window).width();

        if((imgH/imgW) > (winH/winW)) {
            $('#imgLayer img').css({ top: "0px", width: "auto", height: $('#imgLayer').height() + "px" });
        } else {
            $('#imgLayer img').width($('#imgLayer').width() + "px");
            var cImgH = ($('#imgLayer').width()/imgW) * imgH;
            var top = $('#imgLayer').height()/2 - cImgH/2;
            $('#imgLayer img').css({ top: top+"px", height: "auto"  });
        }

        $('#imgLayer img').fadeIn(200);

}, (android?300:0) );

}