JavaScript中的deviceorientation事件在Chrome Android上不会触发。

Question

1. 我正在尝试触发JavaScript的设备方向事件，但在我的Android设备上无法触发该事件。请查看此处的事件文档

window.addEventListener('deviceorientation', function(event) {
  console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});

2. 在Chrome桌面版上运行良好，事件被触发。 (Google Chrome -> 检查 -> 自定义和控制开发工具 -> 更多工具 -> 传感器 -> 方向（打开并旋转虚拟设备）。

3.但是，如果我从任何安卓设备打开此链接，则事件无法正常工作。我无法看到任何控制台日志或警报...是否需要任何额外的设置才能从安卓获取方向详情...

非常感谢任何形式的帮助。

- Veeresh

---

你是否检查了 window.DeviceOrientationEvent 是否存在以确定它是否被支持？https://developers.google.com/web/fundamentals/native-hardware/device-orientation/ - Ouroborus

是的，它支持Chrome和Android Web版本。您可以在我提供的链接中检查，并检查浏览器兼容性。 - Veeresh

Answer 1

即使您没有安装任何SSL证书，也需要使用https打开页面。

- freshko

---

为什么这应该是一个解决方案？ - kwoxer

因为这个 https://w3c.github.io/deviceorientation/#security-and-privacy。但是在我的 Chrome 桌面版中，即使没有 https 也可以运行。 - sçuçu

现在似乎在https中也无法工作。即使是three.js的示例页面对我也不起作用... https://threejs.org/examples/misc_controls_deviceorientation.html - Sean Novak

太棒了！这对我来说完全奏效了（我在这里真的很沮丧！）。非常感谢！ - hasse

在这里描述了Chromium的“强大功能”对安全来源的限制（以及它们的解决方法）。链接 - Wyck

Answer 2

目前，我遇到了同样的问题。在Chrome桌面版中，deviceorientation事件似乎可以正常工作，但在Chrome Android中却无法使用。此外，在FireFox中情况则相反。

我不知道为什么会这样。但我可以建议尝试一个非常基本的方法和另一个解决方案，以使其在Chrome上（包括桌面版和Android版）以及FireFox上都能正常工作。

第一个方法是卸载您的Chrome浏览器，或只卸载其更新，然后重新安装它。这已经解决了我的手机上的deviceorientation问题。

另一个方法如下：

您可以使用OrientationSensor中的一个，即AbsoluteOrientationSensor和RelativeOrientationSensor，还可以使用Sensor APIs之一，在Chrome Android上使其正常工作，并仍然将deviceorientation作为后备选项在它适用的地方（即Chrome desktop和FireFox Android）。就我所见，仅在Chrome中提供传感器API。这些Sensor APIs需要在安全环境中使用，如https页面等（https://www.w3.org/TR/secure-contexts/）。我想在web中添加更多关于设备定向测量绝对性的信息：正如这两个传感器api的名称所示，一个是用于绝对定向，即相对于地球真实北极的方向，另一个是相对定向。如果您从您的浏览器中获取absolute属性的值为true，则可以通过deviceorientation事件来实现绝对性。如果您的设备理论上没有磁力计，则该值将为false。此外，移动版Safari不关心此属性。哎呀！它有另一个属性webkitCompassHeading，您可以在Apple Developer和MDN中看到它的介绍，但在规范本身中没有提到。同样，在deviceorientation事件规范中，有关两个不同事物的提及未在Apple Developer或MDN{{link6：compassneedscalibration 事件}}和{{link7：deviceorientationabsolute 事件}}中提到。但是我在我的浏览器中没有看到它们中的任何一个。似乎没有人关心这些。

作为个人的补充说明，我认为这不应该那么复杂。只需将absolute属性值设置为true或false，然后alpha始终与真北或磁北的罗盘角度相关。Sensor APIs即将解决这些问题，但尚未实现太多。

结合Permissions API使用时，您必须按照以下方式使用（来自MDN示例）：

const sensor = new AbsoluteOrientationSensor();
Promise.all([navigator.permissions.query({ name: "accelerometer" }),
             navigator.permissions.query({ name: "magnetometer" }),
             navigator.permissions.query({ name: "gyroscope" })])
       .then(results => {
         if (results.every(result => result.state === "granted")) {
           sensor.start();
           ...
         } else {
           console.log("No permissions to use AbsoluteOrientationSensor.");
         }
   });

这个API提供了四元数，是方向和旋转操作非常有用的对象，特别适用于使用three.js、babylonjs或类似引擎的情况。使用传感器的onreading事件处理程序或reading事件获取四元数，并在所选3D引擎的渲染循环中使用它来更新场景相机或其他对象的方向。

您可以查看一些示例代码，从开发者工具检查器（页面下方为AbsoluteOrientationSensor示例）:

https://sensorbox.glitch.me

上面的评论中有一个建议，认为您必须使用https才能使设备方向事件起作用。根据我从这里了解到的规范https://w3c.github.io/deviceorientation/#security-and-privacy，这是正确的，但是据我尝试，它也适用于http页面。而且，在您的情况和我的情况下，无论它是否在https页面中，它都不起作用。

希望它有所帮助，在当前传感器Web开发的最新技术状态下，这种情况有点混乱。

- sçuçu

---

感谢您的好回答。在我的iOS设备上，您的示例页面https://sensorbox.glitch.me上的两种方向方法都卡在了加载中，这是需要我调整的设置还是已经过时了？ - David Lamm