3

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?

benzkji
  • 1,718
  • 20
  • 41
  • if(window.innerHeight > window.innerWidth){ alert("Landscape Orientation!"); } also you can refer to [this url](http://davidwalsh.name/orientation-change) – Arun Feb 28 '14 at 14:19
  • 1
    for testing touch support you can use function is_touch_device() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } – Arun Feb 28 '14 at 14:23
  • thx, but it's not about orientation change. it's about "does it have a real compass built in". see https://developer.mozilla.org/de/docs/WebAPI/Detecting_device_orientation the example at the bottom works in my chrome on mac book... – benzkji Feb 28 '14 at 14:31
  • What has 'ontouchstart' to do with deviceorientation? – Jonny Sep 19 '18 at 17:39
  • Poor try to somehow check if a device might have a real compass built in. – benzkji Sep 20 '18 at 09:07

1 Answers1

3

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

benzkji
  • 1,718
  • 20
  • 41