全屏安卓网络应用答案

【问题标题】：Full Screen Android Web App全屏安卓网络应用
【发布时间】：2011-11-16 23:20:31
【问题描述】：

我正在尝试创建一个 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 上实现这一点。

【问题讨论】：

标签： javascript android web-applications

【解决方案1】：

我已经通过将 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';
}

【讨论】：