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
What's the Best Way to Make a D3.Js Visualisation Layout Responsive
What Does the "|" (Single Pipe) Do in JavaScript
Vuejs Error: the Client-Side Rendered Virtual Dom Tree Is Not Matching Server-Rendered
Running JavaScript in Selenium Using Python
Addeventlistener Not Working in IE8
Firing Event on Dom Attribute Change
How Does Basic Object/Function Chaining Work in JavaScript
Casperjs/Phantomjs Doesn't Load Https Page
React Useeffect in Depth/Use of Useeffect
Implementing Pagination in Mongodb
Determine Original Name of Variable After Its Passed to a Function
5Xx or 4Xx Error with "No 'Access-Control-Allow-Origin' Header Is Present"
How to Chop/Slice/Trim Off Last Character in String Using JavaScript
Check If a Variable Is a String in JavaScript
JavaScript Checking for Null VS. Undefined and Difference Between == and ===