Can I request Safari window height without a URL bar in a neutral way?

Question

I am writing a small scroll widget for reading, similar to what you get in the iPhone app store, where the screenshot panel for the application is another, horizontally scrolling panel built into the main panel with vertical scrolling.

In all versions (including the full-size keyboard / mouse style on the computer), the panel occupies 100% of the width of the container, so it looks like a horizontal bar on the page.

In the version with a low-resolution touchscreen interface, that is, for smartphones, I want it to also change to the full height of the window, so that when you scroll it vertically, it can occupy the entire screen.

iPhone makes this difficult because $ (window) .height (), or as you want to request, seems to depend on whether the URL bar is visible.

Without a special code code, to find out if it is on the iPhone or adds a window scroll to the hacks to disable the URL, and then ask for the height, is there any way to ask Safari mobile: "what is the height window", which will give an answer on my 3GS 416 whether the URL bar is currently displayed or not?

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

Thank you, I fought off this a little, and here I dug myself out and could not find this specific information.

Answer 1

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

In my case, the page contains only a layer with one image, which should be as large as the viewport allows, while maintaining the original aspect ratio. Therefore, I have a function that I call when loading and changing the orientation, and it looks like this:

function updateImgLayer() { $('#imgLayer img').hide(); // to prevent flickering $('#imgLayer').height("5000px"); // to be sure it 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) ); 

}