简体   繁体   中英

How to check for a device/browser that fully supports the deviceorientation event?

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?

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM