Detect Rotation of Android Phone in the Browser with JavaScript

Detect rotation of Android phone in the browser with JavaScript

To detect an orientation change on an Android browser, attach a listener to the orientationchange or resize event on window:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

Check the window.orientation property to figure out which way the device is oriented. With Android phones, screen.width or screen.height also updates as the device is rotated. (this is not the case with the iPhone).

How to detect device orientation with JavaScript?

There are two ways to do this:

First, as per the Screen API documentation, using >= Chrome 38, Firefox, and IE 11, the screen object is available to not only view the orientation, but to also register the listener on each time the device orientation changes.

screen.orientation.type will explicitly let you know what the orientation is, and for the listener you can use something simple like:

screen.orientation.onchange = function (){
// logs 'portrait' or 'landscape'
console.log(screen.orientation.type.match(/\w+/)[0]);
};

Second, for compatibility with other browsers like Safari that aren't compatible with Screen, this post shows that you can continue to use innerWidth and innerHeight on window resizing.

 function getOrientation(){
var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Portrait";
return orientation;
}

window.onresize = function(){ getOrientation(); }

Detect orientation using javascript on android devices

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.

Detect if browser/device supports screen rotation

I think you can detect it like so:

if( 'onorientationchange' in window) { /* supported! */ }

However, I'm not sure if some browsers will support the event even though they never fire it.

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}

jQuery Mobile has an event that handles the change of this property... if you want to warn if someone rotates later - orientationchange

Also, after some googling, check out window.orientation (which is I believe measured in degrees...)

EDIT: On mobile devices, if you open a keyboard then the above may fail, so can use screen.availHeight and screen.availWidth, which gives proper height and width even after the keyboard is opened.

if(screen.availHeight > screen.availWidth){
alert("Please use Landscape!");
}


Related Topics



Leave a reply



Submit