javascript - 全屏Android Web应用

我正在尝试创建一个Web应用程序，该应用程序在加载时会自动调整大小以填充浏览器窗口，并在屏幕顶​​部隐藏地址栏。

我目前正在使用在iOS上可以使用的代码，但在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)

该应用程序具有使用iScroll的内容，因此可以滚动浏览，并且它们是位于内容下方的页脚。需要将ID可更新的div中的内容调整为正确的高度，以便该应用填满整个屏幕。我还没有想出如何在android上实现这一目标。

最佳答案

我已通过将setHeight函数更改为以下内容解决了此问题：

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';
}