移动浏览器上的设备运动/运动检测不起作用

Question

我正在尝试建立一个具有简单视差效果的网站。 在移动设备上，我希望这种效果能够响应设备的方向/运动。 网上有大量关于使用deviceorientation事件以及使用generic sensor api 。 但是，虽然在我的设备上使用 Chrome，但这些在 Safari 或 Brave 上不起作用。

我注意到即使是我发现的演示也尝试了类似的事情，例如。 Punchmeter 、 Parallax.js也不适用于 Safari 或 Brave。

这种功能是否不再可能（大概是出于安全原因）。 如果是这样，这是什么时候发生的？ 很多文档似乎没有使用此信息进行更新。 最后，是否有人对解决方法有任何建议（有没有办法请求访问加速度计的权限）？

Answer 1

你是对的，它以前工作过，是的，这是真的，出于隐私原因，它不再在 Safari 上工作，因为 12.2 版导致Motion & Orientation Access是一个opt in功能。

它也不会在Parallax.js 中修复 ->这是正在讨论的问题。

因此，您必须使其有效工作的唯一方法是要求用户激活它， “您可能在 UX 明智的情况下不想要求用户进行陀螺仪设置，只是为了实现纯粹的美学小‘好有’添加” - 乔纳坦-r

---

如果你仍然想实现它，那么你可以试试这个代码中发现在这里。 但我还没试过

  askPermission() {
    // feature detect
    if (typeof DeviceOrientationEvent.requestPermission === "function") {
      DeviceOrientationEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === "granted") {
            window.addEventListener("deviceorientation", () => {});
          }
        })
        .catch(console.error);
    } else {
      // handle regular non iOS 13+ devices
    }
  }

---

要通知：如果它在其他浏览器（如 chrome）中不起作用，您必须确保尝试https -> localhost将不起作用