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

Question

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

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

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

iPhone使这一点变得棘手,因为$(window).height()或者你想要查询它似乎取决于URL栏是否可见.

没有特殊的代码来知道它是否在iPhone上,或者添加黑客来滚动窗口以关闭URL栏然后查询高度,有没有办法向Safari移动设备询问"窗口高度是多少"无论URL栏目前是否可见,我的3GS都会得到416的答案？

对于所有主要的智能手机,我想找到一种平台中立的方式,"我可以将此面板设置为什么高度,以便当您滚动到它时,它会填满整个浏览器窗口？"

谢谢,我已经打了一会儿反对这个,已经在这里挖了一下,找不到这个具体的信息.

Answer 1

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

\n\n

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

\n\n

function updateImgLayer() {\n    $(\'#imgLayer img\').hide(); // to prevent flickering\n    $(\'#imgLayer\').height("5000px"); // to be sure it\'s bigger then the viewport    \n\n    // timeout of zero ms makes sure layer-resize is finished in mobile-safari\n    // the android-browser seems to need more time \xe2\x80\x93 set it to 300 ms there.\n    setTimeout(function() {\n        window.scrollTo(0, 1); // scroll the url-bar out\n\n        $(\'#imgLayer\').height(window.innerHeight + "px");\n\n        var imgH = $(\'#imgLayer .height\').text(); // wrote img-dimensions in there by php\n\n        // the rest is to scale the image\n        var imgW = $(\'#imgLayer .width\').text();\n        var winH = window.innerHeight;\n        var winW = $(window).width();\n\n        if((imgH/imgW) > (winH/winW)) {\n            $(\'#imgLayer img\').css({ top: "0px", width: "auto", height: $(\'#imgLayer\').height() + "px" });\n        } else {\n            $(\'#imgLayer img\').width($(\'#imgLayer\').width() + "px");\n            var cImgH = ($(\'#imgLayer\').width()/imgW) * imgH;\n            var top = $(\'#imgLayer\').height()/2 - cImgH/2;\n            $(\'#imgLayer img\').css({ top: top+"px", height: "auto"  });\n        }\n\n        $(\'#imgLayer img\').fadeIn(200);\n\n}, (android?300:0) );\n

\n\n

}

\n