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.
- Open the demo page
- Rotate your device in the hands, the page should detect screen orientation change and display current state
- Try to change the screen orientation programmatically by clicking the buttons with the desired screen orientation. Please note that your device may support only some orientation types. Probably it will not work if you're not in fullscreen mode.
- Try clicking the fullscreen mode button. Most modern browsers require fullscreen mode activated to allow rotations.
- Try different browsers. The results can vary a lot.
- Install the website as an app (PWA) and try the previous steps.
Supports orientation detection, full-screen mode activation and programmatically change and lock of screen orientation.
android-chrome-111.0.5563.115_x265_002.mp4
Supports orientation detection, full-screen mode activation and programmatically change and lock of screen orientation.
android-pwa_x265_001.mp4
Supports orientation detection, full-screen mode activation. Programmatically change and lock of screen orientation is not supported.
DuckDuckGo-5.153.0_x265.mp4
| 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.
We use two methods to get 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 a device does not support rotation, you will get such a message. However, such a 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.