Question

I am trying to create a web app that will size itself to fill the browser window when it loads and hides the address bar at the top of the screen.

I am currently using this code that work on iOS, but it will not work on Android.

function setHeight() {
    window.scrollTo(0, 1);
    var footerH = document.getElementById('footer').offsetHeight;
    var wrapperH = window.innerHeight - footerH - 1;
    document.getElementById('updatable').style.height = wrapperH + 'px';
}


document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function (){
        window.scrollTo(0, 1);
        setTimeout(function () {
            setHeight()
        }, 100)
    }, 100)
}, false)

The app has content that uses iScroll so that it can be scrolled through and their is a footer that sits underneath the content. The content in the div with the id updatable needs to be resized to the correct height so that the app fills up the whole screen. I have not worked out how to achieve this on android yet.

Answer 1

I have solved this problem by changing the setHeight function to the following:

var footerH = document.getElementById('footer').offsetHeight;;
var wrapperH;

if (android) {
    wrapperH = window.outerHeight / window.devicePixelRatio - footerH - 1;
    document.getElementById('updatable').style.height = wrapperH + 'px';
    window.scrollTo(0, 1);
}
else {
    window.scrollTo(0, 1);
    //var headerH = document.getElementById('header').offsetHeight;
    wrapperH = window.innerHeight - footerH - 1;
    document.getElementById('updatable').style.height = wrapperH + 'px';
}