开发者

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 moti开发者_运维问答on 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.


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


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!');
});


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜