Screen Orientation Test

What is this tool?

The Screen Orientation Test reports what your browser currently thinks the screen is doing: portrait or landscape, the orientation type string, the rotation angle, and the live screen and viewport dimensions with the device pixel ratio.

The classification is deliberately simple and reliable. Portrait or landscape is decided by comparing the viewport's height against its width, so it works even on browsers that do not implement the Screen Orientation API at all; the angle and the type string come from screen.orientation when it exists, falling back to the legacy window.orientation value.

On top of that live readout it adds a guided two-step rotation test, a coverage indicator for the two modes, a rotation history log, a responsive layout preview and buttons that attempt an orientation lock so you can see for yourself whether your browser permits it.

How to use it

1. Read the current stateThe panel names the mode, the orientation type such as portrait-primary, the angle, and the screen and viewport sizes. Rotate your phone with rotation unlocked and every one of those values should update within a moment.
2. Start the rotation testPress Start Rotation Test. It records the mode you are in now, then asks you to rotate to the opposite mode and rotate back. Reaching the original mode again after visiting the other one completes the test.
3. Watch the coverage indicatorCoverage counts how many of the two modes have been observed in this session, so it reads 50% after one and 100% once both portrait and landscape have been seen. The test result reads PASS only if both were actually observed.
4. Check the API support panelFour separate checks: whether screen.orientation exists, whether it reports a numeric angle, whether it exposes a lock function, and whether orientation change events fire. Desktop browsers usually pass the first three and never change state.
5. Try the lock buttonsLock Portrait and Lock Landscape call screen.orientation.lock, and Unlock releases it. Expect a rejection outside fullscreen or outside an installed app — the tool reports the browser's own error message rather than pretending the lock worked.
6. Review the historyEvery mode or angle change is timestamped into a rolling list of the last twenty events. That log is the quickest way to catch a rotation that happened and then silently reverted, and Clear History empties it.

What the results mean

Mode and orientation type

Portrait or landscape, decided by whether viewport height is at least viewport width, plus the browser's own type string. portrait-primary is upright and portrait-secondary is upside down; landscape-primary and landscape-secondary are the two ways of holding it sideways.

Angle

How far the content is rotated relative to the device's natural orientation — 0° natural, 90° and 270° the two landscape rotations, 180° upside down. Because it is relative to the natural orientation, a tablet whose natural state is landscape reports 0° while held sideways.

Screen versus viewport dimensions

Screen width and height describe the display; available width and height exclude system bars; viewport width and height describe the area your page actually gets in CSS pixels. The viewport is always the smaller number, and the gap is browser chrome.

Device pixel ratio

How many physical pixels back one CSS pixel. A phone advertising 1080 physical pixels across at a ratio of 3 gives a 360 CSS-pixel viewport, which is why a phone's CSS width looks so much smaller than its spec sheet.

Rotation test result

PASS once you have left the starting mode, reached the opposite mode and returned, with both portrait and landscape actually observed. INCOMPLETE means the sequence finished without both modes being seen, which usually means rotation lock was on.

Orientation lock outcome

A success message, or the browser's rejection text. A rejection is a legitimate result: locking generally requires fullscreen or an installed progressive web app, and the tool passes that reason straight through.

What it can detect

• Whether the OS or browser is honouring rotation at all — the single most common cause of a phone that will not turn is the rotation lock in the quick settings
• Whether the Screen Orientation API exists, reports an angle, exposes a lock and fires change events in this browser
• The exact orientation type, distinguishing portrait-secondary and landscape-secondary from their primary counterparts
• Whether a rotation was registered and then reverted, visible in the timestamped history
• The real CSS viewport your layout receives, versus the physical resolution the device advertises
• Whether orientation lock is permitted in your current context, and the browser's own reason when it is refused

Limits worth knowing

A browser can only report what the platform gives it. These are the honest boundaries of this page, so a result is never read as more than it is.

• It reports what the browser reports and nothing beneath it. If the OS refuses to rotate, the page sees no change — it cannot reach past the browser to ask the accelerometer directly, and it cannot force a rotation.
• It cannot detect that a phone is lying face down, tilted, or at any angle other than the four the orientation API describes. Continuous tilt is a motion-sensor question, which is what the gyroscope and compass tools are for.
• It cannot repair or recalibrate anything. A device whose rotation is genuinely broken needs an OS-level or hardware fix; this page only tells you which of the two states the browser currently believes it is in.
• Orientation lock is not guaranteed anywhere. Browsers require fullscreen or an installed app, desktop browsers reject it outright, and iOS Safari does not implement it at all — so a refusal proves the API is behaving correctly, not that something is wrong.
• On desktop the state simply never changes, because there is no rotation to observe. That is why the rotation test can only ever be run meaningfully on a phone or tablet.
• Nothing about your device or its rotation is transmitted. The readouts and the history live in the page, which the page's own data FAQ states.

Tips

• Turn off rotation lock in your quick settings before you conclude the sensor is broken — it explains most failed rotation tests, and the coverage indicator will jump to 100% the moment it is off.
• Note the viewport width in both modes when debugging a responsive layout. Those two numbers, not the device's advertised resolution, are the breakpoints your CSS actually sees.
• If you need the lock to work, enter fullscreen first. Locking outside fullscreen is refused by design in most browsers, and the error text the page shows says as much.

Troubleshooting

Related documentation

• MobileMobile Device TestA thirteen-item capability scan of your phone — touch, sensors, screen, camera, microphone, audio, network, battery, haptics and wake lock — in one page.
• MobileTouch Screen TestSix touch modes — quick draw, accuracy targets, multi-touch, a 25-cell grid, tracking and edge coverage — with a full pointer event log.
• MobileGyroscope TestLive X, Y and Z rotation rate in rad/s and deg/s, a scrolling activity graph, a guided three-axis test and a five-second zero-motion check.
• DisplayDisplay FPS TestMeasure the frame rate your browser is actually delivering, with 1% lows and jitter.
• DisplayScreen Uniformity TestA thirteen-step sequence across brightness, grey and colour fields, mapped to nine zones.