Introduction

On the web, the current screen orientation is usually either portrait or landscape, and modern browsers expose that information through the Screen Orientation API. In practice, you often combine that API with CSS media queries and a fallback based on viewport dimensions so the UI stays responsive across browsers.

Reading the current orientation in JavaScript

The most direct modern approach is screen.orientation.type. It reports values such as portrait-primary or landscape-primary.

1<div id="status"></div>
2
3<script>
4  const status = document.getElementById("status");
5
6  function renderOrientation() {
7    const type = screen.orientation?.type;
8    status.textContent = type ?? "Orientation API not available";
9  }
10
11  renderOrientation();
12</script>

If the browser supports the API, this gives you a precise orientation string rather than a guessed value.

Responding to orientation changes

A one-time check is useful, but most apps need to react when the user rotates the device:

1<script>
2  function renderOrientation() {
3    const type = screen.orientation?.type ?? "unknown";
4    console.log("Current orientation:", type);
5  }
6
7  renderOrientation();
8  screen.orientation?.addEventListener("change", renderOrientation);
9</script>

That pattern is helpful for media players, dashboards, or layouts that need to show different controls in landscape mode.

A practical fallback with matchMedia

Browser support is uneven enough that a fallback is still worth having. A good option is the orientation media query:

1<script>
2  const portraitQuery = window.matchMedia("(orientation: portrait)");
3
4  function currentOrientation() {
5    return portraitQuery.matches ? "portrait" : "landscape";
6  }
7
8  console.log(currentOrientation());
9  portraitQuery.addEventListener("change", () => {
10    console.log("Changed to", currentOrientation());
11  });
12</script>

This is often enough if you only care about portrait versus landscape and do not need the exact API-specific orientation type.

Styling the page with CSS

Orientation checks are not only for JavaScript. Many layout changes are better handled directly in CSS:

1.gallery {
2  display: grid;
3  grid-template-columns: 1fr;
4  gap: 1rem;
5}
6
7@media (orientation: landscape) {
8  .gallery {
9    grid-template-columns: 1fr 1fr;
10  }
11}

That keeps presentation logic in the stylesheet and avoids unnecessary JavaScript-driven layout changes.

Last-resort fallback with viewport dimensions

If you need a simple fallback where the Orientation API is unavailable, compare viewport width and height:

1<script>
2  function guessedOrientation() {
3    return window.innerHeight >= window.innerWidth ? "portrait" : "landscape";
4  }
5
6  console.log(guessedOrientation());
7  window.addEventListener("resize", () => {
8    console.log("Possibly changed to", guessedOrientation());
9  });
10</script>

This is not as precise as the dedicated APIs, but it works in many cases and is better than having no fallback at all.

For application code, a layered approach works best: try screen.orientation, fall back to matchMedia, and only then use width-versus-height guessing. That keeps the code robust without overcomplicating it.

Common Pitfalls

The first pitfall is assuming orientation and viewport size always mean the same thing. On some devices, browser chrome, split-screen mode, and virtual keyboards can change the usable viewport in ways that make simple width-versus-height checks misleading.

Another issue is relying only on JavaScript for layout. If the real goal is to rearrange UI elements, CSS @media (orientation: ...) rules are usually simpler and more robust.

Be careful with event support as well. Some browsers support the media query but not the same event model for screen.orientation, so defensive coding with optional chaining or feature checks is a good idea.

Finally, test on real devices. Orientation behavior in a desktop emulator is helpful, but mobile browsers often differ in timing and viewport behavior during rotation.

If the page must preserve application state during a rotation, make sure the orientation handler is idempotent. A layout update should be safe to run multiple times without duplicating DOM nodes or re-registering listeners.

Summary

• Use screen.orientation.type when you want the browser's current orientation value.
• Listen for the change event if the app needs to react when the device rotates.
• Use matchMedia("(orientation: portrait)") as a practical cross-browser fallback.
• Prefer CSS media queries for layout changes and JavaScript for behavior changes.
• Fall back to comparing window.innerWidth and window.innerHeight only when the dedicated APIs are unavailable.