Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect orientation using javascript on android devices

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.

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

Portrait

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

Output from Kindle Fire

Landscape

The rotation is 90 and the resolution is 600 x 819

Portrait:

The rotation is 0 and the resolution is 1024 x 395

output from droidx

landscape:

The rotation is 90 and the resolution is 320x488

Portrait:

The rotation is 0 and the resolution is 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

OR

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

like image 778
nick Avatar asked Apr 12 '12 21:04

nick


1 Answers

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.

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.

like image 89
nick Avatar answered Oct 04 '22 20:10

nick