What Is My Screen Orientation Checker? Portrait or Landscape
What Is My Screen Orientation Checker. Open this screen orientation checker to see your Orientation Type and rotation Angle live. The free viewport size checker gives you a clear, actionable result instantly, with no sign-up required.
Interactive Tool
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.
What is my screen orientation checker really telling you? It reports whether your screen orientation is portrait or landscape, so your app or web page can adapt its layout and protect the user experience on any device. The Screen Orientation API in your browser gives that answer, and this guide shows how to read it.
What Is My Screen Orientation Checker and Why Detect Orientation?
Orientation detection matters because mobile apps and web pages look very different when a phone is held upright or turned sideways. Screen orientation detection lets your UI pick the right layout, which keeps pages responsive, improves readability and usability, and gives you an optimized UI for each posture. Android developers do it in Kotlin with Jetpack Compose, Google's modern toolkit, while web developers rely on the browser. Run your input through the dark mode checker to get a detailed breakdown in seconds.
You can detect screen orientation to match a tablet in landscape mode or a phone in portrait mode. Some open source tools even lock the screen orientation for apps that cannot handle a rotated layout, but none of that works until you know the device orientation first.
Orientation Type and Angle Values You Can Read
The screen.orientation property returns a ScreenOrientation interface describing the document's current screen orientation. Its instance properties are the orientation type and the orientation angle, a rotation in degrees measured from the default orientation. On Android, the same facts come from the configuration object. Run the screen size estimator tool to double-check a result before you rely on it for something important.
| Type value | Typical angle | Device posture |
|---|---|---|
| portrait-primary | 0 | Upright, natural position |
| landscape-primary | 90 | Turned sideways once |
| portrait-secondary | 180 | Upside down |
| landscape-secondary | 270 | Turned the other way |
Portrait-Primary and Landscape-Primary
These two are the usual resting postures: upright, then the first sideways turn. Most phones report the first one until you tilt them.
Portrait-Secondary and Landscape-Secondary
Secondary values appear when the device is rotated the opposite way. Because the rotation direction varies by device, check whether a value starts with portrait or landscape instead of matching one exact string.
Orientation Lock and Unlock Methods
The Cordova plugin follows the W3C draft and works across platforms. Calling lock('landscape') is the lock method, and it returns a promise; if the lock fails, the promise rejects with NotSupportedError. The unlock method hands control back to the default orientation. While a fixed lock is active, the reported value stays fixed too, even if the user rotates the device.
Handling an Orientation Change Event
Every orientation change fires a change event, so you never need to poll. Register an event listener with addEventListener on the ScreenOrientation object and read the new type and angle inside the callback. MDN lists change under events.
The onchange Handler
As an alternative, assign an event handler to the onchange attribute and run console.log(type) each time it fires.
Example Implementation for Device Orientation in JavaScript
This example is a small JavaScript implementation of a checker for the web that shows portrait or landscape, and it needs only three steps:
- Read the type and angle once when the page loads.
- Add a change listener that updates your layout.
- Try the demo on a phone, then turn it sideways.
The Screen Orientation API also ships a demo in the Cordova repository that tests each lock type.
Browser Compatibility and Orientation Specifications
MDN marks the interface as widely available across browsers since March 2023, so a checker like this works in current browsers on most devices. The W3C specification defines the behaviour; older browsers may not report the lock state, so keep a fallback.
Orientation Best Practices for Responsive Layouts
A checker only reports what the app's screen is doing, so follow these best practices when your layout reacts to a turn:
- Adapt font sizes and spacing to the posture the checker reports instead of scaling everything.
- Run testing in both modes and confirm the reported type and angle match the layout shown.
One caveat: if an app forces portrait, the reported value never changes even when the user rotates the device. That reflects the app's screen, not the physical device, so read motion sensors if you need the real position.
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.