在Android设备上使用javascript检测方向

Using some code from this question I have set up some code to detect when an android device is rotated. It works great for the asus tablet (4.0.3) and two simulators (4.0.3 and 2.1), but for the kindle fire (2.3.4), and droidx (2.3.4) it switches the width and height.

使用这个问题的一些代码,我已经设置了一些代码来检测Android设备何时被旋转。它适用于华硕平板电脑(4.0.3)和两个模拟器(4.0.3和2.1),但对于点火(2.3.4)和droidx(2.3.4),它可以切换宽度和高度。

Code:

<script type="text/javascript">
    var supportsOrientationChange = "onorientationchange" in window,orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

    window.addEventListener(orientationEvent, function() {
        alert("The rotation is " + window.orientation + " and the resolution is " + screen.width + " x " + screen.height);
        modRule();
    }, false);
</script>

Output from asus tablet

华硕平板电脑的输出

Holding it in what looks like landscape:

把它拿在看起来像风景的地方:

The rotation is 0 and the resolution is 1280 x 800

旋转为0,分辨率为1280 x 800

Portrait

The rotation is -90 and the resolution is 800 x 1280

旋转为-90,分辨率为800 x 1280

Output from Kindle Fire

来自Kindle Fire的输出

Landscape

The rotation is 90 and the resolution is 600 x 819

旋转为90,分辨率为600 x 819

Portrait:

The rotation is 0 and the resolution is 1024 x 395

旋转为0,分辨率为1024 x 395

output from droidx

droidx的输出

landscape:

The rotation is 90 and the resolution is 320x488

旋转为90,分辨率为320x488

Portrait:

The rotation is 0 and the resolution is 569x239

旋转为0,分辨率为569x239

Is there a way I can

我有办法吗?

a) Make the javascript detect if it should use height instead of width or width instead of height

a)使javascript检测它是否应使用高度而不是宽度或宽度而不是高度

b) Make the devices report the correct values for their width and height?

b)让设备报告宽度和高度的正确值?

1 个解决方案

#1

After looking for a while longer I found out that this is a bug with the 2.2 and 2.3 OS. I fixed the bug with 2.3.4 by putting this code in my app.

在寻找一段时间后,我发现这是2.2和2.3操作系统的错误。我通过将此代码放在我的应用程序中修复了2.3.4的错误。

browser = (WebView)findViewById(R.id.webBrowser);
browser.setBackgroundColor(Color.BLACK);
WebSettings webSettings = browser.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUserAgentString("Android " + android.os.Build.VERSION.SDK);//this is so the JavaScript knows what version of the OS I'm using

And then for detecting if I'm in landscape mode:

然后检测我是否处于横向模式:

var uagent = navigator.userAgent.toLowerCase();
function isLandscape()
{
    var width = screen.width;
    var height = screen.height;
    if (isBugged())
    {
        var temp = width;
        width = height;
        height = temp;
    }
    var landscape = width > height;
    return landscape;
}

function isBugged()
{
    return uagent == "android 10"
}

And if that wasn't confusing enough, when the body initially loads, it's right about if it's in landscape mode or not. So I had to bypass my own workaround.

如果这不够混淆,当身体最初加载时,如果它处于横向模式,它是正确的。所以我不得不绕过自己的解决方法。

<body onload="if(isBugged()){uagent = 'bypass';}/*code that depends on isLandscape()*/;uagent = navigator.userAgent.toLowerCase();">

It's a real pain, a lot more work than it should be. Especially since it works in 2.1 but not 2.3.4. Really frustrating, but that's what I have. At the moment, I only check for sdk 10, I'm going to add checking for the other bugged versions soon.

这是一个真正的痛苦,比它应该做的更多的工作。特别是因为它适用于2.1而不是2.3.4。真的很令人沮丧,但这就是我所拥有的。目前,我只检查sdk 10,我将很快添加其他bugged版本的检查。

#1