What is Screen Orientation Tester
The Screen Orientation Tester reads and displays the current screen orientation type (portrait-primary, landscape-secondary, etc.) and angle using the Screen Orientation API. This API is particularly relevant for mobile web applications and PWAs that need to detect or lock screen rotation — for example, a mobile game that should only run in landscape mode, or a checkout flow that locks to portrait to prevent accidental rotation. The tool provides a snapshot of the current orientation state, showing both the human-readable type and the numeric angle in degrees.
How to Use Screen Orientation Tester
- Step 1: Open the Screen Orientation Tester page, which shows a test button and output area.
- Step 2: Click the **Test API** button. The tool reads the current screen orientation from the Screen Orientation API.
- Step 3: The output displays the orientation type (e.g., 'portrait-primary') and the angle in degrees.
- Step 4: Rotate your device to see how the values change — click the button again after each rotation.
- Step 5: If the API is not available (desktop browsers, older mobile browsers), the output indicates it is not supported.
Why Use Screen Orientation Tester
Mobile web developers building games, media players, or full-screen experiences need to detect and respond to screen orientation changes. The Screen Orientation Tester shows exactly what values the API returns for each physical orientation, helping developers understand the mapping between device position and API values. This is especially important because the angle and type values can be confusing — for example, 'landscape-secondary' means the device is rotated 270 degrees from portrait-primary, not simply 'in landscape'.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.
Frequently Asked Questions
What is the difference between landscape-primary and landscape-secondary?
<p>Landscape-primary (90°) means the device is held with the home button or notch on the right side. Landscape-secondary (270°) means the home button or notch is on the left side. Both are landscape orientations, but they represent opposite rotations from the default portrait-primary position. The angle value confirms which way the device is rotated.</p>
Can I lock the screen orientation with this API?
<p>Yes, but only within a full-screen context. After requesting full-screen via Element.requestFullscreen(), you can call screen.orientation.lock('landscape') or screen.orientation.lock('portrait') to prevent the screen from rotating. This is commonly used in mobile games and video players that need a fixed orientation. The lock is automatically released when the element exits full-screen mode.</p>
Does this work on desktop browsers?
<p>Desktop monitors do not typically rotate, so screen.orientation.type is usually 'landscape-primary' with angle 0. The API is most useful on mobile devices and tablets where the accelerometer detects physical rotation.</p>
What happens if I call lock() outside of full-screen mode?
<p>The lock() call will fail with a NotSupportedError. The Screen Orientation API only allows orientation locking when the document is in full-screen mode. This is a security and usability restriction to prevent web pages from trapping users in an unexpected orientation.</p>