walitoff/screen-orientation-test

Tests for programmatically getting and locking screen orientation with JS

Tests for programmatically getting and locking screen orientation with JS

This project builds a web page for testing user's browser if it can report active device screen orientation and if it's possible to change and lock the screen orientation programmatically with JS. It's useful if you need to check if your iPhone or Android device supports this functionality and if you can use it in your web projects.

DEMO IS HERE

How to test

1. Open the demo page
2. Rotate your device in hands, the page should detect screen orientation change and display current state
3. Try to change the screen orientation programmatically by clicking the buttons with the desired screen orientation. Please note that not all orientation types may be supported by your device. Probably it will not work if you're not in fullscreen mode.
4. Try clicking fullscreen mode button. Most modern browsers require fullscreen mode activated to allow rotations.
5. Try different browsers. The results can vary a lot.
6. Install the website as an app (PWA) and try the previous steps.

Sample videos

Example 1. Android 10 Chrome browser 111.0.5563.116

Supports orientation detection, full screen mode activation and programmatically change and lock of screen orientation.

android-chrome-111.0.5563.115_x265_002.mp4

Example 2. Android 10, PWA mode, Chrome browser 111.0.0.0

Supports orientation detection, full screen mode activation and programmatically change and lock of screen orientation.

android-pwa_x265_001.mp4

Example 3. Android 10 DuckDuckGo 5.153.0

Supports orientation detection, full screen mode activation. Programmatically change and lock of screen orientation is not supported.

DuckDuckGo-5.153.0_x265.mp4

Some test results

Browser	OS	Type	Mode	Detection	Fullscreen Mode	Rotation
Google Chrome 111.0.5563.116	Android 7,10,12	Mobile	Browser	✅	✅	✅
Google Chrome 111.0.0.0	Android 7,10,12	Mobile	PWA	✅	✅	✅
Google Chrome 111.0.5563.147	Windows 11	Desktop	Browser	✅	✅	❌
Firefox 111.1.0	Android 7	Mobile	Browser	✅	✅	❌
Brave 1.49.129	Android 7	Mobile	Browser	✅	✅	✅
DuckDuckGo 5.153.0	Android 10, 12	Mobile	Browser	✅	✅	❌
Yandex Browser 23.30.1	Android 12	Mobile	Browser	✅	✅	✅
Safari 15.6.4	iOS 15.7.3, 15.7.4	Mobile	Browser	❌	❌	❌
Safari 16.3	iOS 13.2.1 Ventura	Desktop	Browser	❌	❌	❌
Safari 16.4	iOS 13.3 Ventura	Desktop	Browser	✅	✅	❌

If you want to share your test results, please open an issue or PR.

Technical details

We use two methods to obtain screen lock:

• old deprecated function screen.lockOrientation (and screen.mozLockOrientation, screen.msLockOrientation if available)
• new function ScreenOrientation.lock

Some devices like desktop computers usually don't support screen rotation. If device does not support rotation, you will get such message. However, such message may be seen on mobile devices too, if the browser does have a full support for the screen rotation API.

Usually the screen rotation lock requires the fullscreen mode first to be activated in browser. There's a button to enter and exit fullscreen mode in the demo using Element.requestFullscreen().
Fullscreen mode is supported by most modern browsers.

The website is built with Hugo.

screen-orientation-test's Issues

failed to execute 'lock' on 'screenorientation' illegal invocation