Solved

Detect orientation using javascript on android devices

Posted on 2012-04-12
2
1,383 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
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
This article discusses how to create an extensible mechanism for linked drop downs.
This video is in connection to the article "The case of a missing mobile phone (https://www.experts-exchange.com/articles/28474/The-Case-of-a-Missing-Mobile-Phone.html)". It will help one to understand clearly the steps to track a lost android phone.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now