如何在JavaScript中获取浏览器可用屏幕高度的正确Android值

Question

我正在开发一个移动应用程序，需要获取正确的浏览器内部高度。

目前我正在使用

$(window).height()

计算高度。这在iPhone/iPad上运行良好。

当我启动运行Android 2.3.5的Galaxy S2时，开始出现一些奇怪的结果...

第一次加载页面并调用 $(window).height() 时：

$().ready(function(){...

我得到了正确的结果（无论手机是竖屏还是横屏）

一旦我将手机旋转为水平位置，它会立即报告正确的高度。

问题发生在将手机从水平旋转为垂直时

手机报告一个完全不正确的高度值。

现在我尝试使用这些值来查看是否有任何正确的值。

screen.height   
screen.availHeight  

但是结果仍然相同

---

我正在使用这种方法来检测旋转

    var previousOrientation = 0;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

- samccone

Answer 1

在Android浏览器中，屏幕大小和innerHeight是非常混乱的，特别是当结合一个会导致WebView在关闭键盘时不重新调整大小的bug时。对于Android来说，我找到的最理智的属性是window.outerHeight。在Android上，它通常报告屏幕高度减去状态栏高度。但在iOS上不一样，因此您可能需要进行一些浏览器嗅探 ;(

- gregers