javascript - 在 Safari iOS 中使用加速度计

Question

我刚开始玩它，我想知道是否有一种方法可以基于 1:1 手势移动页面中的元素，比如框/div：

让我更好地解释一下：我在网上看到的示例它们具有惯性等...

当我向上倾斜 iphone 时，我只想将一个框移到页面顶部，反之亦然.. 直接运动，不需要惯性

有没有与我所说的内容接近的演示？

Answer 1

出于隐私考虑，从 iOS 12.2 开始，Apple 将限制 Safari 访问加速度计。Settings > Safari > Motion & Orientation Access 中有一个新开关，默认为“OFF”。

有人要求通过询问用户的许可来控制该功能，但目前看来这不可能。

此举将破坏 Safari 的大多数 AR 和 VR 体验，大多数人不知道它为什么会破坏。

进一步阅读：

• https://www.macrumors.com/2019/02/04/ios-12-2-safari-motion-orientation-access-toggle/
• https://www.fastcompany.com/90302260/in-another-privacy-move-apple-will-limit-websites-access-to-your-iphones-motion-data
• https://www.cultofmac.com/604562/apple-plans-to-limit-accelerometer-and-gyroscope-access-in-safari-on-ios/

迄今为止我发现的最佳解决方法： https ://github.com/w3c/deviceorientation/issues/57#issuecomment-481039307

* 更新 *

Safari 13 Beta 在 iOS 上为 DeviceMotionEvent 和 DeviceOrientationEvent 添加了权限 API：https ://developer.apple.com/documentation/safari_release_notes/safari_13_beta_3_release_notes#3314664

Answer 2

据我所知，Safari 可以通过以下方式检测陀螺仪/加速度计事件：

window.ondevicemotion = function(event) {
// event.accelerationIncludingGravity.x
// event.accelerationIncludingGravity.y
// event.accelerationIncludingGravity.z
}

我知道有一个带有一些弹跳球的演示，但我找不到它。但是，您可以访问 Apple 网站上的文档来为 Safari 浏览器开发此文档以获取更多信息。请参阅以下链接：

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html

更新：我知道我在某处见过它......这是演示，适用于 iPhone、Android 和 Mac（带加速度计）： http ://mrdoob.com/projects/chromeexperiments/ball_pool/