Skip to content

Tests for programmatically getting and locking screen orientation with JS

License

Notifications You must be signed in to change notification settings

walitoff/screen-orientation-test

Repository files navigation

Codacy Badge Codacy Security Scan Dependency Review ESLint Own Tests Deploy Hugo site to Pages GitHub

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

Cover image

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:

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.