Solved

Detect orientation using javascript on android devices

Posted on 2012-04-12
2
1,408 Views
Last Modified: 2012-06-27
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>

Open in new window


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?
0
Comment
Question by:HDM
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37841973
Did you follow the links in the comment?

Android 2.2 and 2.3 have a bug such that screen width and height are not reported reliably. See http://stackoverflow.com/q/5021090/436641 and http://stackoverflow.com/q/3702073/436641.
0
 

Author Closing Comment

by:HDM
ID: 37844288
After I saw those links, I wound up modifying my app so it sends the sdk version in the user agent and then the javascript checks the useragent for android 10 (the sdk for 2.3.4) and if it's a match, it switches the width and height. It's a mess, but works for now.
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
There is a lot to be said for protecting yourself and your accounts with 2 factor authentication.  I found to my own chagrin, that there is a big downside as well.
This video teaches viewers about errors in exception handling.
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question