I'm trying to detect whether a device that's running a webpage JavaScript script in a browser has accelerometer data available for devicemotion and deviceorientation access. This is what I have now:

  function onMotion(event) {
    if (event.acceleration.y==null) {
      //there can be null events even on supported devices
      return;
    }
    document.getElementById("support-status-text").innerHTML = "Supported on this device";
    document.getElementById("y-acceleration-text").innerHTML = roundToFixed(event.acceleration.y);
  }

  function roundToFixed(value) {
    return value==null ? value : value.toFixed(2);
  }

  if (!('ondeviceorientation' in window)) {
    document.getElementById("support-status-text").innerHTML = "Orientation not supported on this device";
  }

  if ('ondevicemotion' in window) {
    window.addEventListener('devicemotion', onMotion);
  } else {
    document.getElementById("support-status-text").innerHTML = "Not supported on this device";
  }

<div id="container">
  <p id="support-status-text">Loading...</p>
  <p id="y-acceleration-text">nothing</p>
</div>

I'm trying to detect whether a device that's running a webpage JavaScript script in a browser has accelerometer data available for devicemotion and deviceorientation access. This is what I have now:

  function onMotion(event) {
    if (event.acceleration.y==null) {
      //there can be null events even on supported devices
      return;
    }
    document.getElementById("support-status-text").innerHTML = "Supported on this device";
    document.getElementById("y-acceleration-text").innerHTML = roundToFixed(event.acceleration.y);
  }

  function roundToFixed(value) {
    return value==null ? value : value.toFixed(2);
  }

  if (!('ondeviceorientation' in window)) {
    document.getElementById("support-status-text").innerHTML = "Orientation not supported on this device";
  }

  if ('ondevicemotion' in window) {
    window.addEventListener('devicemotion', onMotion);
  } else {
    document.getElementById("support-status-text").innerHTML = "Not supported on this device";
  }

<div id="container">
  <p id="support-status-text">Loading...</p>
  <p id="y-acceleration-text">nothing</p>
</div>

On my phone, which has both motion and orientation support, the top text reads "Supported on this device" with the incoming accelerometer data displayed below it (after flashing "Loading..." and "nothing" before non-null events start firing, which is fine for now). However, on my laptop, which does not have motion support, I just see "Loading..." rather than the expected "Not supported on this device". On my tablet, which I believe has motion support but not orientation support, I see "Loading..." rather than the expected "Orientation not supported on this device". What am I doing wrong?

• javascript
• html
• mobile
• frontend
• devicemotion

1 Answer 1

There are 3 ways I can think of to do this:

1. Detect on server side and pass this information back on HTTP response: HTTP has a userAgent field that includes specifics about the client browser. You could probably detect that they are using a mobile browser / OS and, based on that, send back a field in HTML or Javascript that indicates a mobile device.
2. JavaScript browser detection: You can use navigator.userAgent similarly to suggestion #1. Note: A year or so ago I remember reading that there was a movement to change this property and split it out into seperate parts (ala navigator.userAgent.foo if you want to go this way I would recommend researching this.
3. Provide a toggle: You could put a toggle switch on your webpage to toggle accelerometor yes or no. You could then store this in localStorage and hide the switch.