Question

I have a HTML5 compass that works quite ok. Now I need a smart way to distinguish between "pseudo deviceorientation enabled" browsers (as desktop chrome and FF) and real candidates like iPhone/Android/iPad Browsers that use the device's magnetometor.

My current solution is a basic check for the DeviceOrientationEvent and touch support:

if (window.DeviceOrientationEvent && 'ontouchstart' in window) {
  // setup real compass thing, with event.alpha
} else {
  // setup some mouse following hack
}

Is that enough? I'm not really sure about devices "with touch support but no magnetometer", as for example chrome on a mac book has touch support, and a fake deviceorientation?

Was it helpful?

Solution

it seems to work as is, I was wrong, chrome on mac book is not going into the "real compass" section. should have tested it, maybe.

if (window.DeviceOrientationEvent && 'ontouchstart' in window) {
    // setup real compass thing, with event.alpha
    document.body.innerHTML = "haz!";
} else {
    // setup some mouse following hack
    document.body.innerHTML = "nope";
}

check yourself: http://jsfiddle.net/benzkji/J58ef/

remains what happens if a touch enabled windos laptop with deviceorientation enabled chrome is showing up. probably check the "absolute" property of the deviceorientation event: https://developer.mozilla.org/de/docs/WebAPI/Detecting_device_orientation

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top