Javascript 我能否以平台无关的方式查询无URL栏mobile Safari窗口高度?

Javascript 我能否以平台无关的方式查询无URL栏mobile Safari窗口高度?,javascript,iphone,mobile,safari,Javascript,Iphone,Mobile,Safari,我正在编写一个小的侧面滚动文本阅读器小部件,类似于iPhone应用商店中的小部件,应用程序的屏幕截图面板是嵌入在主垂直滚动面板中的一个不同的水平滚动面板 在所有版本(包括全分辨率键盘/鼠标电脑样式)中,面板占据了容器宽度的100%,因此它就像横穿页面的水平条纹 在小分辨率触摸界面版本中,即对于智能手机,我希望它也能调整为窗口的全高,这样当你垂直滚动到它时,它可以占据整个屏幕 iPhone让这变得很棘手,因为$(window).height()或您想要查询的方式似乎取决于URL栏是否可见 如果没有

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

在所有版本(包括全分辨率键盘/鼠标电脑样式)中,面板占据了容器宽度的100%,因此它就像横穿页面的水平条纹

在小分辨率触摸界面版本中,即对于智能手机,我希望它也能调整为窗口的全高,这样当你垂直滚动到它时,它可以占据整个屏幕

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

如果没有特殊的外壳代码来知道它是否在iPhone上,或者添加一些黑客来滚动窗口以关闭URL栏,然后查询高度,有没有办法问Safari mobile,“窗口高度是多少”,在我的3GS上,不管URL栏当前是否可见,都会得到416的答案

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


谢谢,我已经为此绞尽脑汁了一段时间,已经在这里翻了翻,找不到这个具体的信息。

我也在寻找解决方案。没有成功。我最后遇到了一个你想避免的黑客。但由于似乎没有其他解决方案,我想我把细节留在这里:

在我的例子中,页面只包含一个层,其中一个图像应该尽可能大,保持原始纵横比。所以我有一个函数,在加载和方向改变时调用,它是这样的:

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) );

}

谢谢,这与我最后做的基本相同。我很快就了解到,任何有趣、健壮的web开发都有这种模式。如果JS有一个明确的“在浏览器重新呈现之前屈服”的东西来避免对setTimeout持续时间的猜测,那就太好了。我已经找到了一个实现这个的方法,请检查我对类似问题的回答-