In iOS 12.1 and above, it is no longer possible to use these two events properly in a browser or webview. Previously, it was possible to directly listen to deviceorientation and easily obtain the device's tilt values, which could be applied to practical projects. For example, you could use the Extension Designer to write mobile extensions and create suitable games on the mBlock mobile app using gravity sensing to achieve many interesting things.
In version 12.1, the official default setting for Motion & Orientation settings is disabled. You can open the settings on an iPad or iPhone 12.1+ device and go to settings - Safari - PRIVACY & SECURITY to check if Motion & Orientation Access is enabled. However, in version 13, the official has hidden this option, so you can't find it anymore.
But don't worry, in iOS 12.1+ versions, you can use DeviceMotionEvent.requestPermission()|DeviceOrientationEvent.requestPermission() to obtain motion and orientation permissions. When you call this function, a system dialog will appear to request permission. Once the user grants permission, you can listen to the deviceorientation|devicemotion events to solve the problem. You can also guide the user to click on the settings in the image above to enable the permission, but this only applies to versions below 13, as the option is no longer available in version 13.
However, it is important to note that the website requiring authorization must have a valid https certificate. Otherwise, when triggered, it will throw an error Call to requestPermission() failed, reason: Browsing context is not secure. You can directly debug the website opened in Safari on an iPad by entering DeviceOrientationEvent.requestPermission() to check if authorization is allowed. In actual applications, users still need to trigger permission acquisition actively, otherwise it will throw an error Unhandled Promise Rejection: NotAllowedError: Requesting device orientation or motion access requires a user gesture to prompt. You can simulate this by directly opening [baidu.com](http://baidu.com), for example, document.getElementById('s_logo').onclick = getDeviceOrientationEventPermission. This way, as long as you click outside the area, the authorization dialog will appear normally. If the user cancels the authorization, no matter how you trigger it, the authorization window will not appear again, and only 用户拒绝授权。 will be output. This is similar to the behavior of the Chrome browser, where the authorization can only be prompted once, and subsequent authorizations can only be done by the user in the settings.
Due to the strict usage of motion and orientation events in iOS 12.1+ versions, it becomes very troublesome to use this functionality in a webview. First, you cannot open the authorization window through getDeviceOrientationEventPermission. Therefore, if you want to use events similar to motion or orientation in a webview, you not only need to obtain permission on the web side, but also need corresponding support from the native side. iOS 13 has added the DeviceMotionEvent and DeviceOrientation interfaces.
In conclusion, if users want to write mobile extensions in the Extension Designer and use motion and orientation events, it is actually impossible to achieve full device support. Therefore, it is necessary to make practical distinctions. When users use the extension and their actual version is 12.1+, they need to be informed that this functionality cannot be used properly.
References:
iOS13 にて javascript の devicemotion を取得する
Get device motion and orientation back on iOS 13