Using Accelerometer in Safari iOS

Question

I just started playing with it, and I wonder if there is a way to move an element in the page, say a box/div, based on 1:1 gesture:

let me explain better: the examples I saw online they act with inertia etc...

i'd just like to move a box to the top of the page when i tilt the iphone up and viceversa.. direct motion, no inertia needed

there is any demo out there close to what I'm talking about?

Answer 1

Due to privacy concerns, as of iOS 12.2 Apple is limiting Safari's access to the accelerometer. There's a new switch in Settings > Safari > Motion & Orientation Access and the default is 'OFF'.

There was an ask to gate the feature by asking the user's permission but it doesn't look like that's currently possible.

This move will break most AR and VR experiences for Safari and most folks won't know why it broke.

Further reading:

• 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/

Best workaround I've found so far: https://github.com/w3c/deviceorientation/issues/57#issuecomment-481039307

* Update *

Safari 13 Beta added a permission API on iOS for DeviceMotionEvent and DeviceOrientationEvent: https://developer.apple.com/documentation/safari_release_notes/safari_13_beta_3_release_notes#3314664