My problem is that I am making a responsive website and want the viewport to be always fullscreen eg on document ready I want the body to be 100% of the available device window INCLUDING the height for the url bar and other navigation elements like those on ios, and for it to stay that way. The resizing is breaking my percentage based design. I have included the following for the viewport:
<meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
Both html and body are styled as follows:
html {
height: 100%;
width:100%;
margin: 0 auto;
padding:0;
}
body {
width:100%;
height:100%;
margin: 0 auto;
padding: 0;
}
With jQuery I think I have succeeded in grabbing the screen size after a resize and setting it that way
$(window).resize(function() {
var height = $("body").css("height");
$("body").css("height", height);
});
but this will only work if the user scrolls down first (up keeps the url bar in place)
I was having the same issue with form inputs and the soft keyboard and used this:
$("#name").focus(function() {
var height = $("body").css("height");
$("body").css("height", height);
});
I have looked around for solutions like the minimal-ui (gone on ios8) and I need more than that anyway, scroll to 0,1, min-height, and various other more complicated solutions like checking for device type etc but I can't seem to get it. I am fairly new to this so if I am missing something obvious, please be kind!
