我可以以平台中立的方式查询无 URL 栏的移动 Safari 窗口高度吗？

Question

我正在编写一个小型横向滚动文本阅读器小部件，类似于您在 iPhone 应用程序商店中获得的小部件，其中应用程序的屏幕截图面板是嵌入在主垂直滚动面板中的不同的水平滚动面板。

在所有版本（包括全分辨率键盘/鼠标计算机样式）中，面板占据容器宽度的 100%，因此它就像跨页面的水平条纹。

在小分辨率触摸界面版本中，即针对智能手机，我希望它也能够调整大小以达到窗口的完整高度，以便当您垂直滚动到它时，它可以占据整个屏幕。

iPhone 使这变得棘手，因为 $(window).height() 或您想要查询它的方式似乎取决于 URL 栏是否可见。

无需对代码进行特殊处理来了解它是否在 iPhone 上，或者添加一些技巧来滚动窗口以关闭 URL 栏，然后查询高度，有没有办法询问 Safari 移动版“窗口高度是多少”在我的 3GS 上，无论 URL 栏当前是否可见，都会产生 416 的答案？

我想找到一种与平台无关的方式来询问所有主要智能手机，“我可以将此面板设置为多高，以便当您滚动到它时，它会填充整个浏览器窗口？”

谢谢，我已经为此苦苦挣扎了一段时间，并且已经在这里进行了挖掘，但找不到这个具体信息。

Answer 1

我也在寻找解决方案。没有成功。我最终遇到了像你实际上想避免的那样的黑客行为。但由于似乎没有其他解决方案，我想我将细节留在这里：

在我的情况下，页面只包含一个带有一个图像的图层，该图像应该与视口允许的一样大，保持原始的宽高比。所以我有一个在加载和方向更改时调用的函数，它是这样的：

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

}