Screen Orientation Checker
Screen Orientation Checker reads your display's current orientation type and rotation angle straight from the browser, showing whether you're in portrait or landscape along with the aspect ratio for each. Rotate your phone or tablet and watch the indicator spin and the values update live with no taps required; on a desktop monitor the reading is simply static since there's nothing to rotate. Useful for a quick sanity check when a responsive layout is only misbehaving in one orientation. The check your viewport size checks your input against current best practices and flags anything worth fixing.
Your browser knows exactly how your screen is currently held — portrait or landscape, and at what rotation angle — through the same Screen Orientation API that responsive websites and mobile games rely on. Rotate your phone or tablet and watch the orientation type and angle update instantly with no taps required; on a desktop monitor the reading stays fixed since there's nothing to physically rotate. This page explains what each value means and why it's useful for diagnosing a layout that only misbehaves in one orientation.
What This Screen Orientation Checker Reads
The tool above reads three pieces of information directly from your browser's screen.orientation object: the orientation type (one of portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary), the rotation angle in degrees, and your current aspect ratio derived from your viewport's width and height. On touch devices it also reports whether your hardware is rotation-capable at all, since a desktop monitor has no accelerometer to detect. The check your dark mode gives you a clear, actionable result instantly, with no sign-up required.
Portrait vs Landscape, Primary vs Secondary
Every screen has a natural resting orientation — portrait-primary for most phones, landscape-primary for most desktop monitors and TVs. Rotating 180° from that natural position gives you the secondary orientation of the same type: portrait-secondary is upside-down portrait, and landscape-secondary is upside-down landscape. The rotation angle tells you how far you've turned from that natural position, typically in 90° steps: 0°, 90°, 180°, or 270°.
Why the Aspect Ratio Changes When You Rotate
Rotating your device doesn't just swap the orientation label — it swaps your width and height, which flips your aspect ratio. A phone that's 9:19.5 in portrait becomes roughly 19.5:9 the moment you turn it to landscape. This is exactly why a webpage or app that looks fine in one orientation can suddenly clip content, overflow a container, or misplace a fixed-position element in the other: any layout rule written for one ratio range has to be re-checked against its rotated counterpart.
Why Checking Your Screen Orientation Actually Matters
Diagnosing a Responsive Layout Bug
If a site works perfectly in portrait but breaks the moment you rotate to landscape — a sticky header overlapping content, a modal that no longer fits, a video player that loses its controls — the fastest way to confirm it's an orientation issue (rather than a plain screen-size issue) is to watch the orientation type and angle change live on this page while you rotate, and cross-reference that against the breakpoint the site is using. A CSS media query written as @media (orientation: landscape) reacts to exactly the type value shown above. The check your css breakpoint runs entirely in your browser — nothing you enter is ever sent to a server.
Verifying Orientation Lock and PWA Behavior
Progressive web apps and mobile games often lock their screen to a single orientation using the screen.orientation.lock() method, or declare a default orientation in their web app manifest. If you're testing whether a lock is actually taking effect, this checker gives you a live readout: attempt the rotation, and if the reported type and angle don't change, the lock is holding.
Understanding Screen vs Device Orientation
It's worth knowing the checker reads screen orientation, not device orientation. Screen orientation is the logical portrait/landscape state your browser reports, changing in discrete 90° steps. Device orientation is the continuous physical tilt of your hardware in 3D space, measured by an accelerometer and gyroscope — a separate API entirely. You can tilt your phone slightly without triggering an orientation change at all; the screen orientation only flips once you cross the threshold into a genuinely different portrait or landscape stance.
| Orientation Type | Typical Angle | Common On |
|---|---|---|
portrait-primary | 0° | Phones held upright |
landscape-primary | 90° | Phones/tablets rotated right; desktop monitors at rest |
portrait-secondary | 180° | Phone held upside down |
landscape-secondary | 270° | Phone/tablet rotated left |
Frequently Asked Questions
- What is screen orientation and how is it measured?
- Screen orientation describes the physical positioning of a display — either portrait (taller than wide) or landscape (wider than tall). It is typically measured in degrees of rotation from the device's natural orientation: 0°, 90°, 180°, or 270°. The W3C Screen Orientation API standardizes these angles and orientation type names across browsers.
- What are portrait-primary and landscape-primary orientations?
- Portrait-primary (0°) is the device's natural upright position, most common on phones. Landscape-primary (90°) is rotated 90° clockwise from the natural orientation. Portrait-secondary (180°) and landscape-secondary (270°) are the flipped counterparts of each. These four types are defined by the W3C Screen Orientation specification.
- How do I detect screen orientation in a web browser?
- You can use the Screen Orientation API via `screen.orientation.type` and `screen.orientation.angle` in JavaScript. For older browsers, `window.innerWidth > window.innerHeight` provides a simple landscape/portrait check. The API is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
- What is the difference between screen orientation and device orientation?
- Screen orientation refers to the logical display layout (portrait vs landscape) which is what the user sees on screen. Device orientation refers to the physical tilt and rotation of the device in 3D space, measured via accelerometer and gyroscope sensors. Screen orientation changes in discrete steps (0°, 90°, 180°, 270°), while device orientation is a continuous measurement.
- Can I lock the screen orientation on a mobile device?
- Yes, using the Screen Orientation API's `screen.orientation.lock()` method, web apps (especially Progressive Web Apps) can lock orientation to a specific mode such as portrait or landscape. This is useful for games, video players, and kiosks. Note that this feature generally requires the page to be in fullscreen mode and may have limited support on iOS Safari.
- Why does my screen orientation not change when I rotate my device?
- Most devices have an auto-rotation lock setting in their system settings that prevents the screen from changing orientation automatically. Check your device's quick settings panel or display settings to ensure auto-rotate is enabled. Additionally, some apps override orientation settings programmatically.
- What aspect ratios are common for portrait and landscape orientations?
- Modern smartphones in portrait mode typically have aspect ratios between 19.5:9 and 21:9 (roughly 2.0–2.3). In landscape mode the ratio inverts. Tablets commonly use 4:3 (1.33) or 16:10 (1.6) ratios. A ratio greater than 1.0 indicates landscape orientation, while a ratio less than 1.0 indicates portrait.
- How does screen orientation affect responsive web design?
- Screen orientation is a key factor in responsive design. CSS media queries support `@media (orientation: portrait)` and `@media (orientation: landscape)` to apply different styles based on orientation. Switching orientation changes the viewport dimensions, which can affect layout, font sizes, image display, and navigation structure significantly on mobile devices.