CODEWITHSUNDEEP
javascriptiphoneandroidipadhtml
RK-
RK-

Reputation: 12201

device orientation problem in HTML 5 on Android

I have the below code to check for device orientation and device motion handling in HTML 5. I got this from http://dev.w3.org/geo/api/spec-source-orientation.html. I tested my code using iPhone3G and the motion event was trapped. I dont know why the device orientation was not trapped. I believe since iPhone3G does not have Compass support I could not trap 'compassneedscalibration' event.

I tested the App in Android's browser. (HTC Wildfire). I could not get any of the events. Please share your why we dont get the events in Android Mobile?

 window.addEventListener("compassneedscalibration", function(event) {
                  alert('Your compass needs calibrating! Wave your device in a figure-eight motion');
                  event.preventDefault();


     }, true);

    window.addEventListener("deviceorientation", function(event) {
                  // process event.alpha, event.beta and event.gamma
                  alert("deviceorientation");
    }, true);

    window.addEventListener("devicemotion", function(event) {
                  // Process event.acceleration, event.accelerationIncludingGravity,
                  // event.rotationRate and event.interval
                   alert("devicemotion");
    }, true);

UPDATE 1

One thing I have notice while testing in iPhone and iPad is that whether the device moves or not the event kept getting triggered continuously with out any stop.

UPDATE 2

I found the reason behind the question I put up in UPDATE 1. It seems that The API detects and delivers accelerometer data 50 times per second.

Upvotes: 0

Views: 4598

Answers (3)

Michael Drob
Michael Drob

Reputation: 350

on iOS, the event you need to trap is "onorientationchange"

Upvotes: 0

RK-
RK-

Reputation: 12201

I came to know that right now these functionality is implemented only in iOS Safari Browsers. So we can not trap those events in iOS.

SOURCE: http://www.mobilexweb.com/samples/ball.html

Upvotes: 2

twaddington
twaddington

Reputation: 11645

Try listening for the "resize" event in Android instead. If you're using jQuery, your code might look like this:

$(window).bind('resize', function() {
    alert('resize!');
});

Upvotes: 1

Related Questions